{"id":7358,"date":"2014-12-26T11:00:14","date_gmt":"2014-12-26T17:00:14","guid":{"rendered":"https:\/\/getflywheel.com\/?p=7358"},"modified":"2023-04-14T15:57:14","modified_gmt":"2023-04-14T20:57:14","slug":"animate-css","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/animate-css\/","title":{"rendered":"How to Animate with CSS"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">We\u2019ve gotten pretty used to seeing animations on websites and enjoying the energy and variety they bring to web design. They\u2019re eye catching, a great way to add some visual interest to a site, and generally make the experience more exciting for your users.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">While traditionally achieved with GIFs, SVGs, WebGL, and background videos, animations can also be efficiently created with CSS. Browser support for CSS animations has greatly improved and is becoming quite popular &#8212; compatible browsers include Firefox 5+, IE 10+, Chrome, Safari 4+, and Opera 12+.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Today I\u2019ll walk you through the basics of creating a CSS animation with a step-by-step demo. Stick around after that and check out five examples of animations. You\u2019ll be able to use all these ideas to create animations for your own projects!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CSS Animation Basics<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Obviously, it\u2019s important to cover the basics of how animations work before we dive into the five fun CSS animations.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, keyframes are a key component to CSS animations. You may be familiar with that term if you\u2019ve worked with Adobe Flash or have experience with video editing. In that case, the term keyframe is just what you would think: it\u2019s a way to specify a certain action.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You may have come across <code>@keyframes<\/code> in a CSS stylesheet before. Inside this <code>@keyframes<\/code> is where you define the styles and stages for the animation. Here\u2019s a great example of a fadeout effect:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@-webkit-keyframes fadeOut {\n0% {\nopacity: 1;\n}\n100% {\nopacity: 0;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The basics of the fadeout keyframe we just created include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A descriptive name: in this case, fadeOut.<\/li>\n\n\n\n<li>Stages of the animation: From was set to 0% and To was set to 100%.<\/li>\n\n\n\n<li>CSS styles that will be applied at each stage.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">By default, the <em>From<\/em> will be at 0% and the <em>To<\/em> will be at 100%, since no other stages are specified in this example.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Specific Actions with Animation Subproperties<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">We need to do a little more to style things &#8212; we need to style the <code>animation<\/code> property with subproperties. If keyframes define what the animation will look like, then animation sub-properties define specific rules for the animation. These let you configure the timing, duration, and other key details of how the animation sequence should progress.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The animation property is used to call <code>@keyframes<\/code> inside a CSS selector. Animations can and will often have more than one subproperty. Here are examples of subproperties:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Animation-name:<\/strong> name of the <code>@keyframes<\/code> at-rule, which describes the animation&#8217;s keyframes. The name <code>fadeOut<\/code> in the previous example is an example of animation-name.<\/li>\n\n\n\n<li><strong>Animation-duration:<\/strong> length of time that an animation should take to complete one full cycle.<\/li>\n\n\n\n<li><strong>Animation-timing-function:<\/strong> timing of the animation, specifically how the animation transitions through keyframes. This function has the ability to establish acceleration curves. Examples are <em>linear, ease, ease-in, ease-out, ease-in-out,<\/em> or <em>cubic-bezier<\/em>.<\/li>\n\n\n\n<li><strong>Animation-delay:<\/strong> delay between the time the element is loaded and the beginning of the animation.<\/li>\n\n\n\n<li><strong>Animation-iteration-count:<\/strong> number of times the animation should repeat. Want the animation to go on forever? You can specify <em>infinite<\/em> to repeat the animation indefinitely.<\/li>\n\n\n\n<li><strong>Animation-direction:<\/strong> whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself.<\/li>\n\n\n\n<li><strong>Animation-fill-mode:<\/strong> values that are applied by the animation both before and after has executed.<\/li>\n\n\n\n<li><strong>Animation-play-state:<\/strong> with this option, you are able to pause and resume the animation sequence. Examples are <em>none, forwards, backwards,<\/em> or <em>both<\/em>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Putting it All Together for Best Browser Support<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">There\u2019s a lot going on here, and the terminology can be a bit confusing. But we now know that keyframes define what the animation will look like as well as different animation stages, and that the animation property uses subproperties to define animation options like delay, direction, timing, and so on.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You are probably familiar with vendor or browser prefixes &#8212; those are necessary when working with animations. We need to make sure that we have the best browser support. Here are the standard browser prefixes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Chrome &amp; Safari: <code>-webkit-<\/code><\/li>\n\n\n\n<li>Firefox: <code>-moz-<\/code><\/li>\n\n\n\n<li>Internet Explorer: <code>-ms-<\/code><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Internet Explorer 10 does not require a prefix for transitions, but all transforms require the prefix. Opera is covered because it recognises WebKit styles.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Transition start<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>-webkit-transition<\/code><\/li>\n\n\n\n<li><code>-moz-transition<\/code><\/li>\n\n\n\n<li><code>transition<\/code><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Transform start:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>-webkit-transform<\/code><\/li>\n\n\n\n<li><code>-moz-transform<\/code><\/li>\n\n\n\n<li><code>-ms-transform<\/code><\/li>\n\n\n\n<li><code>transform<\/code><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Five animations in action<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now that we\u2019ve covered the basics, let\u2019s create some code to put to use!<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2014\/12\/animation-one.gif\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2014\/12\/animation-one.gif\" alt=\"animation-one\" class=\"wp-image-7363\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Animation One: circle to square<\/strong><br><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s go detailed on this first one, so we can make sure we understand all the concepts we\u2019ve covered so far. The animation will start out as a circle and morph into a square.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Creating a div to start with is a great way to test out the animation:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&amp;amp;amp;lt;div class=\u201danimationOne\u201d&amp;amp;amp;gt;\n&amp;amp;amp;lt;\/div&amp;amp;amp;gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now let\u2019s get our <code>@keyframes<\/code> set up. This animation will have five stages because a square has four sides and we need to have a 0% starting point. Use prefixes, as shown below, but for the rest of the tutorial we\u2019ll keep it simple with just the basics.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@-webkit-keyframes circle-to-square {\n0%{}\n25%{}\n50%{}\n75%{}\n100%{}\n}\n\n@-moz-keyframes circle-to-square {\n0%{}\n25%{}\n50%{}\n75%{}\n100%{}\n}\n\n@-ms-keyframes circle-to-square {\n0%{}\n25%{}\n50%{}\n75%{}\n100%{}\n}\n\n@keyframes circle-to-square {\n0%{}\n25%{}\n50%{}\n75%{}\n100%{}\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now, let\u2019s create some styles to determine what the border radius will appear to be at each stage:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@keyframes circle-to-square {\n0% {\nborder-radius:50%;\n}\n25% {\nborder-radius:50% 50% 50% 0;\n}\n50% {\nborder-radius:50% 50% 0 0;\n}\n75% {\nborder-radius:50% 0 0 0;\n}\n100% {\nborder-radius:0 0 0 0;\n}\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now add the <code>background-color<\/code> property to help differentiate each stage of the animation:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@keyframes circle-to-square {\n0% {\nborder-radius:50%;\nbackground-color: #6a9bea;\n}\n25% {\nborder-radius:50% 50% 50% 0;\nbackground-color: #90b3ec;\n}\n50% {\nborder-radius:50% 50% 0 0;\nbackground-color: #b0c7ec;\n}\n75% {\nborder-radius:50% 0 0 0;\nbackground-color: #cad7ec;\n}\n100% {\nborder-radius:0 0 0 0;\nbackground-color: #dfe3e9;\n}\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Finally, let\u2019s apply the animation to the test div:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.animationOne {\nwidth: 200px;\nheight: 200px;\n-webkit-animation: circle-to-square 2s 1s infinite alternate;\n-moz-animation: circle-to-square 2s 1s infinite alternate;\n-ms-animation: circle-to-square 2s 1s infinite alternate;\nanimation: circle-to-square 2s 1s infinite alternate;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The animation property is typically written in shorthand, so here\u2019s what\u2019s actually going on in the code:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The animation-name is <code>circle-to-square<\/code>.<\/li>\n\n\n\n<li>The animation-duration is <code>2s<\/code>.<\/li>\n\n\n\n<li>The animation-delay is <code>1s<\/code>.<\/li>\n\n\n\n<li>The animation-iteration-count is <code>infinite<\/code>, so it will carry on indefinitely.<\/li>\n\n\n\n<li>And the animation-direction is <code>alternate<\/code>. This means it will play from beginning to end and go back to the beginning.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2014\/12\/animation-two.gif\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2014\/12\/animation-two.gif\" alt=\"animation-two\" class=\"wp-image-7365\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Animation Two: rotation<\/strong><br><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This animation allows for the rotation of an object.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@keyframes full-rotate {\n0% {\ntransform: rotate(0deg);\n}\n25% {\ntransform: rotate(45deg);\n}\n50% {\ntransform: rotate(90deg);\n}\n75% {\ntransform: rotate(135deg);\n}\n100% {\ntransform: rotate(180deg);\n}\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">To keep our animation projects separate, remember to create another div for this second example. I added a background color because we\u2019ll be adding the animation to the div itself for this example.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The duration for this animation is two seconds, with a three second delay. The animation-iteration-count is five, so this project will animate five times before stopping. The animation plays in reverse every odd time (1,3,5,&#8230; ) and in a normal direction every even time (2,4,6,&#8230; ).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.animationTwo {\nwidth: 200px;\nheight: 200px;\nbackground-color: #ccc;\nanimation: full-rotate 2s 3s 5 alternate-reverse;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2014\/12\/animation-three.gif\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2014\/12\/animation-three.gif\" alt=\"animation-three\" class=\"wp-image-7364\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Animation Three: expand and flicker<\/strong><br><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is a great animation for a button because it\u2019s more eye catching and prominent in comparison to other elements on the page. This might also be something worthwhile to include on a <code>:hover<\/code> state.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@keyframes button-flicker {\n0% {\ntransform: scale(1);\n}\n30% {\ntransform: scale(1);\n}\n40% {\ntransform: scale(1.08);\n}\n50% {\ntransform: scale(1);\n}\n60% {\ntransform: scale(1);\n}\n70% {\ntransform: scale(1.05);\n}\n80% {\ntransform: scale(1);\n}\n100% {\ntransform: scale(1);\n}\n}\n\n.btn.pulse {\nbackground: #3498db;\nbackground-image: -webkit-linear-gradient(top, #3498db, #2980b9);\nbackground-image: -moz-linear-gradient(top, #3498db, #2980b9);\nbackground-image: -ms-linear-gradient(top, #3498db, #2980b9);\nbackground-image: -o-linear-gradient(top, #3498db, #2980b9);\nbackground-image: linear-gradient(to bottom, #3498db, #2980b9);\n-webkit-border-radius: 28;\n-moz-border-radius: 28;\nborder-radius: 28px;\nfont-family: Arial;\ncolor: #ffffff;\nfont-size: 20px;\npadding: 10px 20px 10px 20px;\ntext-decoration: none;\nanimation: button-flicker 5000ms infinite linear;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">To use test this, we need the following starter div:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.animationThree {\nwidth: 200px;\nheight: 200px;\n}\n\n&amp;amp;amp;lt;div class=\u201danimationThree&amp;amp;amp;gt;\n&amp;amp;amp;lt;a class=&amp;amp;quot;btn pulse&amp;amp;quot; href=&amp;amp;quot;&amp;amp;quot;&amp;amp;amp;gt;Click me&amp;amp;amp;lt;\/a&amp;amp;amp;gt;\n&amp;amp;amp;lt;\/div&amp;amp;amp;gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2014\/12\/animation-four.gif\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2014\/12\/animation-four.gif\" alt=\"animation-four\" class=\"wp-image-7361\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Animation Four: text slide<\/strong><br>Let\u2019s add some animation to text. This project makes your text slide in once from the left.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@keyframes slide-text {\nfrom {\nmargin-left: 100%;\nwidth: 200%;\n}\n\nto {\nmargin-left: 0%;\nwidth: 100%;\n}\n}\n\nh1.slide {\nanimation-name: slide-text;\nanimation-duration: 3s;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2014\/12\/animation-five.gif\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2014\/12\/animation-five.gif\" alt=\"animation-five\" class=\"wp-image-7360\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Animation Five: fade in<\/strong><br><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Do you have some surprise content? Check out this fade in animation for content that you want to appear at a later moment. You&#8217;ve got a lot of options here: The fade in can be fast or slow, happen once or multiple times, and so on.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@keyframes fade {\nfrom {\nopacity: 0;\n}\n\nto {\nopacity: 1;\n}\n\n}\n\n.animationFive {\nwidth: 200px;\nheight: 200px;\n}\n\n.animationFive img{\nanimation-name: fade;\nanimation-duration: 3s;\n}\n\n&amp;amp;amp;lt;div class=\u201danimationFive\u201d&amp;amp;amp;gt;\n&amp;amp;amp;lt;img src=&amp;amp;quot;..&amp;amp;quot; \/&amp;amp;amp;gt;\n&amp;amp;amp;lt;\/div&amp;amp;amp;gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">CSS3 animations are fantastic for getting your website moving and grooving! Now that you have the basic concepts down for creating animations, the animation possibilities are endless. What will you animate?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We\u2019ve gotten pretty used to seeing animations on websites and enjoying the energy and variety they bring to web design. They\u2019re eye catching, a great way to add some visual interest to a site, and generally make the experience more exciting for your users. While traditionally achieved with GIFs, SVGs, WebGL, and background videos, animations<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":1,"featured_media":142443,"template":"","resource-topic":[1396,901],"resource-role":[895,1397,896,897],"resource-type":[916],"class_list":["post-7358","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Animate With CSS<\/title>\n<meta name=\"description\" content=\"We\u2019ll walk you through the basics of creating a CSS animation with a step-by-step demo, including five examples of animations.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Animate With CSS\" \/>\n<meta property=\"og:description\" content=\"We\u2019ll walk you through the basics of creating a CSS animation with a step-by-step demo, including five examples of animations.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/animate-css\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-14T20:57:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2014\/12\/css-header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to Animate With CSS\" \/>\n<meta name=\"twitter:description\" content=\"We\u2019ll walk you through the basics of creating a CSS animation with a step-by-step demo, including five examples of animations.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2014\/12\/css-header.png\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/animate-css\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/animate-css\/\",\"name\":\"How to Animate With CSS\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2014-12-26T17:00:14+00:00\",\"dateModified\":\"2023-04-14T20:57:14+00:00\",\"description\":\"We\u2019ll walk you through the basics of creating a CSS animation with a step-by-step demo, including five examples of animations.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/animate-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/animate-css\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/animate-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Animate with CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Animate With CSS","description":"We\u2019ll walk you through the basics of creating a CSS animation with a step-by-step demo, including five examples of animations.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How to Animate With CSS","og_description":"We\u2019ll walk you through the basics of creating a CSS animation with a step-by-step demo, including five examples of animations.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/animate-css\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2023-04-14T20:57:14+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2014\/12\/css-header.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_title":"How to Animate With CSS","twitter_description":"We\u2019ll walk you through the basics of creating a CSS animation with a step-by-step demo, including five examples of animations.","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2014\/12\/css-header.png","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/animate-css\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/animate-css\/","name":"How to Animate With CSS","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2014-12-26T17:00:14+00:00","dateModified":"2023-04-14T20:57:14+00:00","description":"We\u2019ll walk you through the basics of creating a CSS animation with a step-by-step demo, including five examples of animations.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/animate-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/animate-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/animate-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Animate with CSS"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2014\/12\/css-grid.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Agency, Designer, Developer, Freelancer","topic":"<strong>Topics:<\/strong> Design, WordPress","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/7358","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/142443"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=7358"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=7358"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=7358"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=7358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}