{"id":40202,"date":"2023-04-24T07:00:33","date_gmt":"2023-04-24T14:00:33","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=40202"},"modified":"2025-05-21T20:50:03","modified_gmt":"2025-05-22T03:50:03","slug":"css-animation","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/css-animation\/","title":{"rendered":"CSS Animations: Enhance Your Website With These 17 Options"},"content":{"rendered":"\n<p>Captivating animations that hold your gaze while a webpage loads. Seamless transitions guiding you effortlessly through a website&#8217;s content. Unexpected bursts of color and motion as you interact with buttons on an app.<\/p>\n\n\n\n<p>Though subtle, these elements greatly influence your perception of a brand and your overall digital experience. So what brings these engaging details to life? Often, this is achieved with the help of CSS animations.<\/p>\n\n\n\n<p>In this guide, we\u2019ll help you get there with:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A primer on CSS and CSS animation<\/li>\n\n\n\n<li>Key reasons why you should try CSS animations<\/li>\n\n\n\n<li>The few roadblocks to adopting CSS animations (with solutions)<\/li>\n\n\n\n<li>17 exemplary CSS animations to use on your app or website<\/li>\n\n\n\n<li>How to get started with adding CSS to your website<\/li>\n<\/ul>\n\n\n\n<h2 id=\"h-meet-css\" class=\"wp-block-heading\">Meet CSS<\/h2>\n\n\n\n<p>CSS is short for Cascading Style Sheets.<\/p>\n\n\n\n<p>CSS is a code language that dictates how graphic and content elements on a website or application look and act. CSS is useful for customizing colors and fonts, positioning and spacing elements on a page, and of course, creating animations. There are \u201cpure\u201d CSS animations built just from HTML (Hypertext Markup Language) and CSS code, and there are CSS animations that incorporate other types of code (like JavaScript) or existing media (like GIFs).<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>CSS<\/h3>\n    <p>Cascading Style Sheets (CSS) is an essential coding language used for styling webpages. CSS helps you create beautiful pages by modifying the appearance of various elements, including font style, color, layout, and more.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/css\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Read More                    <\/a>\n\n<\/div>\n\n\n\n<p>CSS hit the scene in the early 1990s, and has since evolved from CSS1 to CSS2 to CSS3 \u2014&nbsp;the current and widely-used version. In this article, we\u2019ll follow the common practice of using the term \u201cCSS\u201d when referring to this latest version.<\/p>\n\n\n\n<p>HTML is like the foundation and framing of a home, without which the home can\u2019t exist. But CSS transforms that home with paint, finishings, and decor that impart unique styling and functionality.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1600\" height=\"1245\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/HTML-versus-CSS-1.jpg\" alt=\"HTML vs CSS\" class=\"wp-image-40236 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/HTML-versus-CSS-1-300x233.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/HTML-versus-CSS-1-1024x797.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/HTML-versus-CSS-1-768x598.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/HTML-versus-CSS-1-1536x1195.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-600x467.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-1200x934.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-730x568.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-1460x1136.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-784x610.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-1568x1220.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-877x682.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1245;\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-css-animation-building-blocks\">CSS Animation Building Blocks<\/h3>\n\n\n\n<p>CSS animations use CSS code to string together various properties and values that make on-screen elements \u201cmove.\u201d<\/p>\n\n\n\n<p>CSS properties are the pieces of the animations, such as background, border radius, font, margin, type of movement (like spin or fade), etc. Values fill in the details around these animation properties by defining color, alignment, size, length of time, direction, speed, etc.<\/p>\n\n\n\n<p>Let\u2019s look at the elements of the popular <code>@keyframes<\/code> rule, which defines CSS transitions throughout an animation sequence, for an example of how properties and values work together:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The <code>animation-name<\/code> property gives the name of the animation.<\/li>\n\n\n\n<li>The <code>animation-duration<\/code> property outlines the length of an animation. Values are typically displayed in seconds (0s, 4s, etc.).<\/li>\n\n\n\n<li>The <code>animation-delay<\/code> property specifies a delayed animation start. Its value is also given in seconds (-2s, 5s, etc.).<\/li>\n\n\n\n<li>The <code>animation-iteration-count<\/code> property states the number of times an animation should run. The value represents how many times you wish the animation to repeat; for example, <code>infinite-alternate<\/code> will make it go on forever.<\/li>\n\n\n\n<li>The <code>animation-direction<\/code> property tells how an animation should play. Values include <code>normal<\/code> (forward), <code>reverse<\/code>, <code>alternate<\/code>, etc.<\/li>\n\n\n\n<li>The <code>animation-timing-function<\/code> property outlines the speed curve. Values include <code>ease-in-out<\/code> for a gentle start and end, <code>cubic-bezier<\/code> to create a complex-looking curve, etc.<\/li>\n\n\n\n<li>The <code>animation-fill-mode<\/code> property defines how an element looks when the animation is not playing. Values include <code>forwards<\/code> to retain the values set by the last keyframe, etc.<\/li>\n<\/ul>\n\n\n\n<p>Now to bring it all together! In this <a href=\"https:\/\/www.w3schools.com\/css\/css3_animations.asp\" target=\"_blank\" rel=\"noopener\">example from W3Schools<\/a>, which attaches an animation (named \u201cexample\u201d) to the <code>&lt;div&gt;<\/code> element, you can see that the element is 100px square and has a red background. When the animation begins, it will continue for 4 seconds while the background transitions from red to yellow:<\/p>\n\n\n\n<p><code>\/* The animation code *\/<br>\n@keyframes example {<br>\nfrom {background-color: red;}<br>\nto {background-color: yellow;}<br>\n}<\/code><\/p>\n\n\n\n<p><code>\/* The element to apply the animation to *\/<br>\ndiv {<br>\nwidth: 100px;<br>\nheight: 100px;<br>\nbackground-color: red;<br>\nanimation-name: example;<br>\nanimation-duration: 4s;<br>\n}<\/code><\/p>\n\n\n\n<p>(Note: This is just one example. Keyframe animations aren\u2019t the only way to create CSS animations, and they aren\u2019t compatible with every browser version \u2014&nbsp;keep reading for more insight and tips on compatibility.)<\/p>\n\n\n\n<h2 id=\"h-3-awesome-reasons-to-implement-css-animations\" class=\"wp-block-heading\">3 Awesome Reasons to Implement CSS Animations<\/h2>\n\n\n\n<p>From powering unforgettable interactions to ensuring that they\u2019re happening at the speed of modern expectations, CSS animations have a <i>lot<\/i> to add to the digital experience \u2014&nbsp;both for you and your amazing customers or visitors.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-create-a-unique-story-and-experience\">Create a Unique Story and Experience<\/h3>\n\n\n\n<p>The days of websites functioning as digital billboards are in the rearview mirror.<\/p>\n\n\n\n<p>In the global economy, websites and apps are your best opportunity to <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-tell-your-brand-story\/\" target=\"_blank\" rel=\"noopener\">tell your brand story<\/a>.<\/p>\n\n\n\n<p>Why focus on your story? Because a great story sets your brand apart, captures the attention of your ideal audience, creates lasting connections, and \u2014 perhaps most importantly \u2014&nbsp;inspires <i>action<\/i>.<\/p>\n\n\n\n<p>And your story is, in part, built on the interactive elements you include within your user experience.<\/p>\n\n\n\n<p>CSS animations are all about creating unique experiences that react to and move with the user, building rapport and engagement with your brand story.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-revamp-and-maintain-with-fewer-keystrokes\">Revamp and Maintain With Fewer Keystrokes<\/h3>\n\n\n\n<p>CSS is an organized and somewhat brief coding language. In the web development world, it\u2019s what\u2019s known as \u201cclean.\u201d Style sheets can typically be kept to a minimum for straightforward app and website projects.<\/p>\n\n\n\n<p>That means when it\u2019s time to update your project, do routine maintenance, or just refresh your look and experience \u2014 it should be pretty quick to track down where to make the change, create your update, and apply it across your entire interface. No need to re-code and deploy lots and lots of individual HTML files.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-optimize-your-speed\">Optimize Your Speed<\/h3>\n\n\n\n<p>CSS is considered \u201clightweight\u201d when compared to JavaScript and other coding languages, making it a great tool for adding lively, engaging content and experiences to your product \u2014 without also adding weight that slows down loading.<\/p>\n\n\n\n<p>In addition, it also tends to be aggressively cached. Together, these factors mean animations built using CSS should be quick to show up after that first click, as well as on subsequent loads of your website or app.<\/p>\n\n\n\n<p>As an <a href=\"https:\/\/www.searchenginejournal.com\/ranking-factors\/page-speed\/#close\" target=\"_blank\" rel=\"noopener\">important ranking factor<\/a> when it comes to Google search results, speed is something all businesses with an online presence should be thinking about.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"902\" height=\"492\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/CSS-Button-Animation.gif\" alt=\"CSS Button Animation\" class=\"wp-image-40207 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 902px; --smush-placeholder-aspect-ratio: 902\/492;\" \/><\/figure><\/div>\n\n\n<h2 id=\"h-considerations-before-diving-into-css-animations\" class=\"wp-block-heading\">Considerations Before Diving Into CSS Animations<\/h2>\n\n\n\n<p>Now entering the slow-down zone. Before you go running headlong into CSS animations, there are a few slight hangups we want to make sure you\u2019re aware of and prepared to handle.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-compatibility-concerns\">Compatibility Concerns<\/h3>\n\n\n\n<p>Ever notice how some features seem to disappear or get in the way when you\u2019re interacting with a website on the phone \u2014&nbsp;or slow your computer <i>way<\/i> down?<\/p>\n\n\n\n<p>Different devices (mobile phones, smartwatches, tablets, computers, etc.) and browsers (Chrome, Safari, Firefox, etc.) are all built using different technologies. Those technologies mean how they interact with code languages can vary \u2014&nbsp;and it\u2019s no different in the case of CSS animations.<\/p>\n\n\n\n<p>If you don&#8217;t make custom adjustments, an animation effect that looks amazingly cool on Firefox with your laptop may look or act odd for someone viewing it using Safari on their phone.<\/p>\n\n\n\n<p>Quality assurance (QA) testing is critical to ensure your CSS animations are compatible across all the places where users interact with your digital presence.<\/p>\n\n\n\n<p><b>Solution:<\/b> Use a <a href=\"https:\/\/jigsaw.w3.org\/css-validator\/\" target=\"_blank\" rel=\"noopener\">CSS validator<\/a> and <a href=\"https:\/\/wordpress.com\/support\/how-to-find-your-themes-css\/\" target=\"_blank\" rel=\"noopener\">browser developer tools<\/a> to help identify compatibility issues and errors when creating CSS. Those who are especially code-savvy can install a <a href=\"https:\/\/sass-lang.com\/\" target=\"_blank\" rel=\"noopener\">Sass<\/a> mixin library such as <a href=\"https:\/\/www.bourbon.io\/\" target=\"_blank\" rel=\"noopener\">Bourbon<\/a> to keep browser prefixes (<code>webkit<\/code> for Chrome and Safari, <code>moz<\/code> for Firefox, etc.) up to date and compatible.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"h-17-dynamic-css-animations-to-try-today\" class=\"wp-block-heading\">17 Dynamic CSS Animations to Try Today<\/h2>\n\n\n\n<p>Ready to use CSS animations to build amazing digital experiences that attract and retain users? Ready to increase all-important site speed, and cut down on maintenance and re-design time?<\/p>\n\n\n\n<p>Then you\u2019ve come to the right place! We\u2019ve compiled some awesome CSS animations for your viewing pleasure. Click any option that strikes your fancy to acquire the code you need, and then you can add it to your website style sheet. (FYI, public Pens on CodePen are free to use by anyone for any purpose per their <a href=\"https:\/\/blog.codepen.io\/documentation\/licensing\/\" target=\"_blank\" rel=\"noopener\">licensing<\/a> details.)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-loading-animations\">Loading Animations<\/h3>\n\n\n\n<p>Loading animations might not be the most exciting class of CSS animation, but they\u2019re critical to the user experience. App and website visitors are more likely to be patient with a bit of load time when you\u2019ve provided an indicator that something great is coming shortly.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/petersonby\/pen\/gzxpdj\" target=\"_blank\" rel=\"noopener\"><b>CSS Loader with dots<\/b><\/a><b>\u201d by Aliaksei Peterson<\/b><\/li>\n<\/ol>\n\n\n\n<p>By now, a pulsing line of dots is universal for \u201cJust a sec!\u201d Just like the code, this option is clear and concise, making it a good fit for an online presence with a serious tone or minimal style.<\/p>\n\n\n\n<p>See the Pen <a href=\"https:\/\/codepen.io\/petersonby\/pen\/gzxpdj\" target=\"_blank\" rel=\"noopener\"><br>CSS Loader with dots<\/a> by Aliaksei Peterson (<a href=\"https:\/\/codepen.io\/petersonby\" target=\"_blank\" rel=\"noopener\">@petersonby<\/a>)<br>on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/sdelaney\/pen\/wWdxPe\" target=\"_blank\" rel=\"noopener\"><b>Simple HTML &amp; SVG Loading Spinners<\/b><\/a><b>\u201d by Stephen Delaney&nbsp;<\/b><\/li>\n<\/ol>\n\n\n\n<p>Another classic loading symbol \u2014 the spinner. This animation comes with an option to integrate an SVG, which stands for Scalable Vector Graphic, which can be scaled without quality loss.<\/p>\n\n\n\n<p>See the Pen <a href=\"https:\/\/codepen.io\/sdelaney\/pen\/wWdxPe\" target=\"_blank\" rel=\"noopener\"><br>Simple HTML &amp; SVG Loading Spinners<\/a> by Stephen Delaney (<a href=\"https:\/\/codepen.io\/sdelaney\" target=\"_blank\" rel=\"noopener\">@sdelaney<\/a>)<br>on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/Freeps2\/pen\/vYzVKNw\" target=\"_blank\" rel=\"noopener\"><b>Loading Animation<\/b><\/a><b>\u201d by Mohamed Yousef<\/b><\/li>\n<\/ol>\n\n\n\n<p>This spinning set of teardrop-like shapes offers a beautifully simple animation to get lost in, making a little extra load time feel a lot less annoying. What more could you ask for?<\/p>\n\n\n\n<p>See the Pen <a href=\"https:\/\/codepen.io\/Freeps2\/pen\/vYzVKNw\" target=\"_blank\" rel=\"noopener\"><br>Loading Animation<\/a> by Mohamed Yousef (<a href=\"https:\/\/codepen.io\/Freeps2\" target=\"_blank\" rel=\"noopener\">@Freeps2<\/a>)<br>on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/hisamikurita\/pen\/OJLrjpB\" target=\"_blank\" rel=\"noopener\"><b>Only Css Animation #02<\/b><\/a><b>\u201d by Hisami Kurita<\/b><\/li>\n<\/ol>\n\n\n\n<p>An impressive, pure CSS animation that reminds us of entering the website for an upscale restaurant or hotel. Change the color and name to match your own brand.<\/p>\n\n\n\n<p>See the Pen <a href=\"https:\/\/codepen.io\/hisamikurita\/pen\/OJLrjpB\" target=\"_blank\" rel=\"noopener\"><br>Only Css Animation #02<\/a> by Hisami Kurita (<a href=\"https:\/\/codepen.io\/hisamikurita\" target=\"_blank\" rel=\"noopener\">@hisamikurita<\/a>)<br>on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/Maxoor\/pen\/JZZvXJ\" target=\"_blank\" rel=\"noopener\"><b>The Glowing Loader &#8211; Pure CSS Animation<\/b><\/a><b>\u201d by Maxime Rossignol<\/b><\/li>\n<\/ol>\n\n\n\n<p>The most creative loading screen we\u2019ve seen, this animation gives the viewer a lot to look at while waiting for the rest of your digital elements to come to life.<\/p>\n\n\n\n<p>See the Pen <a href=\"https:\/\/codepen.io\/Maxoor\/pen\/JZZvXJ\" target=\"_blank\" rel=\"noopener\"><br>The Glowing Loader &#8211; Pure CSS Animation<\/a> by Maxime Rossignol (<a href=\"https:\/\/codepen.io\/Maxoor\" target=\"_blank\" rel=\"noopener\">@Maxoor<\/a>)<br>on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-content-animations\">Content Animations<\/h3>\n\n\n\n<p>Looking for a way to make sure your app and website users don\u2019t miss crucial information? Highlight it with any one of these CSS animations.<\/p>\n\n\n\n<ol start=\"6\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/codingyaar\/pen\/LYJQaBe\" target=\"_blank\" rel=\"noopener\"><b>Changing Text Animation CSS<\/b><\/a><b>\u201d by Coding Yaar<\/b><\/li>\n<\/ol>\n\n\n\n<p>Add a little flare to headlines and other important text with this animation, complete with details like slide-in movement, color changes, and more.<\/p>\n\n\n\n<p>See the Pen <a href=\"https:\/\/codepen.io\/codingyaar\/pen\/LYJQaBe\" target=\"_blank\" rel=\"noopener\"><br>Changing Text Animation CSS<\/a> by Coding Yaar (<a href=\"https:\/\/codepen.io\/codingyaar\" target=\"_blank\" rel=\"noopener\">@codingyaar<\/a>)<br>on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"7\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/AbubakerSaeed\/pen\/abzWqPb\" target=\"_blank\" rel=\"noopener\"><b>CSS Block Revealing Effect<\/b><\/a><b>\u201d by Abubaker Saeed<\/b><\/li>\n<\/ol>\n\n\n\n<p>The \u201crevealing\u201d effect with this animation offers yet another interesting way to draw the eye to important content elements that you want to make sure visitors don\u2019t miss.<\/p>\n\n\n\n<p>See the Pen <a href=\"https:\/\/codepen.io\/AbubakerSaeed\/pen\/abzWqPb\" target=\"_blank\" rel=\"noopener\"><br>CSS Block Revealing Effect<\/a> by Abubaker Saeed (<a href=\"https:\/\/codepen.io\/AbubakerSaeed\" target=\"_blank\" rel=\"noopener\">@AbubakerSaeed<\/a>)<br>on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"8\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/cobra_winfrey\/pen\/eojKJv\" target=\"_blank\" rel=\"noopener\"><b>CSS Reveal Slider<\/b><\/a><b>\u201d by Adam Kuhn<\/b><\/li>\n<\/ol>\n\n\n\n<p>With lots of interesting fonts, animated buttons, and a flip feature that uncovers more information \u2014&nbsp;this seems like a great option to introduce users to longer sections of can\u2019t-miss content like FAQs, features, etc.<\/p>\n\n\n\n<p>See the Pen <a href=\"https:\/\/codepen.io\/cobra_winfrey\/pen\/eojKJv\" target=\"_blank\" rel=\"noopener\"><br>CSS Reveal Slider<\/a> by Adam Kuhn (<a href=\"https:\/\/codepen.io\/cobra_winfrey\" target=\"_blank\" rel=\"noopener\">@cobra_winfrey<\/a>)<br>on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"9\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/cobra_winfrey\/pen\/EJmREe\" target=\"_blank\" rel=\"noopener\"><b>Animated Info Card<\/b><\/a><b>\u201d by Adam Kuhn<\/b><\/li>\n<\/ol>\n\n\n\n<p>From the same creator of the previous CSS animation, this option presents another bold and creative way to guide users through elements of your brand story.<\/p>\n\n\n\n<p>See the Pen <a href=\"https:\/\/codepen.io\/cobra_winfrey\/pen\/EJmREe\" target=\"_blank\" rel=\"noopener\"><br>Animated Info Card<\/a> by Adam Kuhn (<a href=\"https:\/\/codepen.io\/cobra_winfrey\" target=\"_blank\" rel=\"noopener\">@cobra_winfrey<\/a>)<br>on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-button-animations\">Button Animations<\/h3>\n\n\n\n<p>Buttons are often the gateway to getting users to take action or dive deeper into your content. Inspire interaction by adding CSS animations to important buttons.<\/p>\n\n\n\n<ol start=\"10\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/RazorXio\/details\/gMaoOW\" target=\"_blank\" rel=\"noopener\"><b>CSS Button On Hover Slide Effect<\/b><\/a><b>\u201d by RazorX<\/b><\/li>\n<\/ol>\n\n\n\n<p>Plenty of options here to add cool color-filling animations to otherwise plain buttons.<\/p>\n\n\n\n<p>See the Pen <a href=\"https:\/\/codepen.io\/RazorXio\/pen\/gMaoOW\" target=\"_blank\" rel=\"noopener\"><br>CSS Button On Hover Slide Effect<\/a> by RazorX (<a href=\"https:\/\/codepen.io\/RazorXio\" target=\"_blank\" rel=\"noopener\">@RazorXio<\/a>)<br>on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"11\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/AlexBelmonte\/pen\/yWzKYR\" target=\"_blank\" rel=\"noopener\"><b>Button Animations<\/b><\/a><b>\u201d by Alex Belmonte<\/b><\/li>\n<\/ol>\n\n\n\n<p>Want to add a little movement to those buttons? Add a hover effect and actions like bouncing, wiggling, and more to your buttons with this CSS.<\/p>\n\n\n\n<p>See the Pen <a href=\"https:\/\/codepen.io\/AlexBelmonte\/pen\/yWzKYR\" target=\"_blank\" rel=\"noopener\"><br>Button Animations<\/a> by Alex Belmonte (<a href=\"https:\/\/codepen.io\/AlexBelmonte\" target=\"_blank\" rel=\"noopener\">@AlexBelmonte<\/a>)<br>on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"12\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/sfoxy\/pen\/XpOoJe\" target=\"_blank\" rel=\"noopener\"><b>CSS button hover effect<\/b><\/a><b>\u201d by Julia<\/b><\/li>\n<\/ol>\n\n\n\n<p>A minimal but impactful wash of color adds some surprise and delight to your buttons.<\/p>\n\n\n\n<p>See the Pen <a href=\"https:\/\/codepen.io\/sfoxy\/pen\/XpOoJe\" target=\"_blank\" rel=\"noopener\"><br>CSS button hover effect<\/a> by Julia (<a href=\"https:\/\/codepen.io\/sfoxy\" target=\"_blank\" rel=\"noopener\">@sfoxy<\/a>)<br>on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-background-animations\">Background Animations<\/h3>\n\n\n\n<p>You want the backgrounds of certain elements of your website or app to be <i>just<\/i> interesting enough to catch the eye \u2014 without overshadowing what it is you want users to read and do.<\/p>\n\n\n\n<ol start=\"13\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/quasimondo\/pen\/AZedgK\" target=\"_blank\" rel=\"noopener\"><b>Animated Background Gradient<\/b><\/a><b>\u201d by Mario Klingemann<\/b><\/li>\n<\/ol>\n\n\n\n<p>Apply this infinite color loop to the background of key sections of your website or app to add a touch of movement.<\/p>\n\n\n\n<p>See the Pen <a href=\"https:\/\/codepen.io\/quasimondo\/pen\/AZedgK\" target=\"_blank\" rel=\"noopener\"><br>Animated Background Gradient<\/a> by Mario Klingemann (<a href=\"https:\/\/codepen.io\/quasimondo\" target=\"_blank\" rel=\"noopener\">@quasimondo<\/a>)<br>on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"14\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/joyanna\/pen\/NWGYLNW\" target=\"_blank\" rel=\"noopener\"><b>CSS Animations with SVGs<\/b><\/a><b>\u201d by Joyanna<\/b><\/li>\n<\/ol>\n\n\n\n<p>Soft, colorful shapes with delicate movements make for a distinctive background for your most crucial sections of content.<\/p>\n\n\n\n<p>See the Pen <a href=\"https:\/\/codepen.io\/joyanna\/pen\/NWGYLNW\" target=\"_blank\" rel=\"noopener\"><br>CSS Animations with SVGs<\/a> by Joyanna (<a href=\"https:\/\/codepen.io\/joyanna\" target=\"_blank\" rel=\"noopener\">@joyanna<\/a>)<br>on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"15\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/ungmo2\/pen\/vXZMEj\" target=\"_blank\" rel=\"noopener\"><b>Simple parallax scroll<\/b><\/a><b>\u201d by Ungmo Lee<\/b><\/li>\n<\/ol>\n\n\n\n<p>A parallax scroll animation enables both the foreground and background to move, but at different speeds to create the illusion of depth. As you can see from the example, the parallax effect can be overwhelming when not applied with restraint.<\/p>\n\n\n\n<p>See the Pen <a href=\"https:\/\/codepen.io\/ungmo2\/pen\/vXZMEj\" target=\"_blank\" rel=\"noopener\"><br>Simple parallax scroll<\/a> by Ungmo Lee (<a href=\"https:\/\/codepen.io\/ungmo2\" target=\"_blank\" rel=\"noopener\">@ungmo2<\/a>)<br>on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-anywhere-animations\">Anywhere Animations<\/h3>\n\n\n\n<p>Try these just-for-fun CSS animations to add a little *spice* at various points of the user experience.<\/p>\n\n\n\n<ol start=\"16\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/katzkode\/pen\/WRjwZR\" target=\"_blank\" rel=\"noopener\"><b>Template: Logo<\/b><\/a><b>\u201d by Alex Katz<\/b><\/li>\n<\/ol>\n\n\n\n<p>Hover over the logo to see a slight expanding effect. This subtle movement can be used on logos as well as buttons, icons, and other components.<\/p>\n\n\n\n<p>See the Pen <a href=\"https:\/\/codepen.io\/katzkode\/pen\/WRjwZR\" target=\"_blank\" rel=\"noopener\"><br>Template: Logo<\/a> by Alex Katz (<a href=\"https:\/\/codepen.io\/katzkode\" target=\"_blank\" rel=\"noopener\">@katzkode<\/a>)<br>on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"17\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/MarioDesigns\/pen\/woJgeo\" target=\"_blank\" rel=\"noopener\"><b>Floating Animation &#8211; CSS<\/b><\/a><b>\u201d by Mario Duarte<\/b><\/li>\n<\/ol>\n\n\n\n<p>A gentle floating effect like this is another surprising and fun touch that lets viewers know you care about your digital properties as well as their experience.<\/p>\n\n\n\n<p>See the Pen <a href=\"https:\/\/codepen.io\/MarioDesigns\/pen\/woJgeo\" target=\"_blank\" rel=\"noopener\"><br>Floating Animation &#8211; CSS<\/a> by Mario Duarte (<a href=\"https:\/\/codepen.io\/MarioDesigns\" target=\"_blank\" rel=\"noopener\">@MarioDesigns<\/a>)<br>on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<h2 id=\"h-how-to-add-css-to-your-website\" class=\"wp-block-heading\">How to Add CSS to Your Website<\/h2>\n\n\n\n<p>Each of the above CSS animations is accompanied by HTML, CSS, and sometimes other code you can paste directly into your website style sheet and edit as needed to make it your own.<\/p>\n\n\n\n<p>If you have a custom-built website where you manage the code and you aren\u2019t familiar with CSS just yet, we think it would be helpful for you to get to know the language before trying to implement the above animations. Learn the basics of creating a line of code then dive into the best tutorials for developing your CSS skills with <a href=\"https:\/\/www.dreamhost.com\/\" target=\"_blank\" rel=\"noopener\">DreamHost<\/a>\u2019s guide to <a href=\"https:\/\/www.dreamhost.com\/blog\/learn-css\/\" target=\"_blank\" rel=\"noopener\">learning CSS<\/a>.<\/p>\n\n\n\n<p>You\u2019ll notice from the above examples that it can take quite a lot of code to create an animation. If you\u2019re feeling comfortable with CSS and are ready to optimize for space and time, consider tapping into a <a href=\"https:\/\/coderpad.io\/blog\/development\/top-10-css-animation-libraries\/\" target=\"_blank\" rel=\"noopener\">CSS animation library<\/a>. Each library will have instructions on how to add it to your website, usually involving adding a source file or <a href=\"https:\/\/www.dreamhost.com\/blog\/guide-using-a-cdn-with-wp\/\" target=\"_blank\" rel=\"noopener\">CDN<\/a> to your markup. Once installed, you can use the library\u2019s specific animation shorthand to add your animations.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>CDN<\/h3>\n    <p>CDN is an abbreviation for \u201cContent Delivery Network\u201d. It refers to a geographically-distributed network of web servers (and their data centers). The entities that make up a CDN collaborate to ensure speedy content delivery via the internet.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/hosting\/cdn\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Read More                    <\/a>\n\n<\/div>\n\n\n\n<p>If you\u2019re rockin\u2019 with a WordPress site, the platform itself offers a handy guide to <a href=\"https:\/\/wordpress.com\/support\/editing-css\/\" target=\"_blank\" rel=\"noopener\">editing CSS<\/a> using either the Site Editor (a beta feature available on some themes) or the Customizer (available on most classic and some third-party themes). Inside these editing screens is where you\u2019ll paste the code from our CSS animation examples above.<\/p>\n\n\n\n<p>But what if a website that enables you to tell your brand story is still just a dream? Then we have good news, because at DreamHost we <i>specialize<\/i> in making website dreams come true. With <a href=\"https:\/\/www.dreamhost.com\/pro-services\/design\/custom-web-design\/\" target=\"_blank\" rel=\"noopener\">custom web design<\/a>, an easy-to-use WordPress <a href=\"https:\/\/www.dreamhost.com\/website-builder\/\" target=\"_blank\" rel=\"noopener\">website builder<\/a>, <a href=\"https:\/\/www.dreamhost.com\/pro-services\/\" target=\"_blank\" rel=\"noopener\">pro services<\/a> from our in-house experts, and of course robust <a href=\"https:\/\/www.dreamhost.com\/hosting\/\" target=\"_blank\" rel=\"noopener\">hosting<\/a> options \u2014&nbsp;<b>DreamHost will help you get your dream online.<\/b><\/p>\n\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Get More Visitors, Grow Your Business\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Our marketing experts will help you earn more traffic and convert more website visitors so you can focus on running your business.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/pro-services\/marketing\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Learn More                    <\/a>\n\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Captivating animations that hold your gaze while a webpage loads. Seamless transitions guiding you effortlessly through a website&#8217;s content. Unexpected bursts of color and motion as you interact with buttons on an app. Though subtle, these elements greatly influence your perception of a brand and your overall digital experience. So what brings these engaging details [&hellip;]<\/p>\n","protected":false},"author":1058,"featured_media":40203,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"A guide to how and why to use CSS animations to enhance your user experience, complete with 17 exemplary CSS animations to copy for your app or website.","toc_headlines":"[[\"h-meet-css\",\"Meet CSS\"],[\"h-3-awesome-reasons-to-implement-css-animations\",\"3 Awesome Reasons to Implement CSS Animations\"],[\"h-considerations-before-diving-into-css-animations\",\"Considerations Before Diving Into CSS Animations\"],[\"h-17-dynamic-css-animations-to-try-today\",\"17 Dynamic CSS Animations to Try Today\"],[\"h-how-to-add-css-to-your-website\",\"How to Add CSS to Your Website\"]]","hide_toc":false,"footnotes":""},"categories":[550,12852],"tags":[],"class_list":["post-40202","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-website-design"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Enhance Your Website with CSS Animations - DreamHost<\/title>\n<meta name=\"description\" content=\"A guide to how and why to use CSS animations to enhance your user experience, complete with 17 exemplary CSS animations to copy for your app or website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/css-animation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"17 Ways to Animate Your Site with CSS\" \/>\n<meta property=\"og:description\" content=\"Master 17 CSS animations to upgrade UX on your site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/css-animation\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-24T14:00:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-22T03:50:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Enhance-Your-Website-With-CSS-Animations-Social-Image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ian Hernandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"17 Ways to Animate Your Site with CSS\" \/>\n<meta name=\"twitter:description\" content=\"Master 17 CSS animations to upgrade UX on your site.\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Hernandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Enhance Your Website with CSS Animations - DreamHost","description":"A guide to how and why to use CSS animations to enhance your user experience, complete with 17 exemplary CSS animations to copy for your app or website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/css-animation\/","og_locale":"en_US","og_type":"article","og_title":"17 Ways to Animate Your Site with CSS","og_description":"Master 17 CSS animations to upgrade UX on your site.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/css-animation\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-04-24T14:00:33+00:00","article_modified_time":"2025-05-22T03:50:03+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Enhance-Your-Website-With-CSS-Animations-Social-Image.jpg","type":"image\/jpeg"}],"author":"Ian Hernandez","twitter_card":"summary_large_image","twitter_title":"17 Ways to Animate Your Site with CSS","twitter_description":"Master 17 CSS animations to upgrade UX on your site.","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Ian Hernandez","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/css-animation\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/css-animation\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"CSS Animations: Enhance Your Website With These 17 Options","datePublished":"2023-04-24T14:00:33+00:00","dateModified":"2025-05-22T03:50:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/css-animation\/"},"wordCount":2524,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/css-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Enhance-Your-Website-With-CSS-Animations-Hero-Image.jpg","articleSection":["Tutorials","Website Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/css-animation\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/css-animation\/","name":"Enhance Your Website with CSS Animations - DreamHost","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/css-animation\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/css-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Enhance-Your-Website-With-CSS-Animations-Hero-Image.jpg","datePublished":"2023-04-24T14:00:33+00:00","dateModified":"2025-05-22T03:50:03+00:00","description":"A guide to how and why to use CSS animations to enhance your user experience, complete with 17 exemplary CSS animations to copy for your app or website.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/css-animation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/css-animation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/css-animation\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Enhance-Your-Website-With-CSS-Animations-Hero-Image.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Enhance-Your-Website-With-CSS-Animations-Hero-Image.jpg","width":1460,"height":1095,"caption":"Enhance Your Website With CSS Animations Hero Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/css-animation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Animations: Enhance Your Website With These 17 Options"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96","name":"Ian Hernandez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","caption":"Ian Hernandez"},"description":"Ian is a Product Designer based in Los Angeles, California. He is responsible for driving brand and product design at DreamHost, developing and maintaining our internal design system, and writing frontend code when he can. In his free time, he enjoys walking his dog, learning history, and discovering new music online and irl. Connect with him on LinkedIn: https:\/\/www.linkedin.com\/in\/ianhernandez23\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/ianh\/"}]}},"lang":"en","translations":{"en":40202,"es":40223,"pt":52127,"de":52130,"uk":52140,"pl":54840,"ru":54925,"it":68519,"fr":70615,"nl":70651},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/40202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1058"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=40202"}],"version-history":[{"count":10,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/40202\/revisions"}],"predecessor-version":[{"id":61473,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/40202\/revisions\/61473"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/40203"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=40202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=40202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=40202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}