{"id":457,"date":"2017-06-21T15:27:06","date_gmt":"2017-06-21T15:27:06","guid":{"rendered":"https:\/\/www.sebastianlenton.com\/?p=457"},"modified":"2017-06-21T15:27:06","modified_gmt":"2017-06-21T15:27:06","slug":"creating-css-animations-animation-delay","status":"publish","type":"post","link":"https:\/\/www.sebastianlenton.com\/2017\/06\/creating-css-animations-animation-delay\/","title":{"rendered":"Creating CSS Animations With animation-delay"},"content":{"rendered":"<p>The CSS animation-delay property is obviously used to delay the commencement of a CSS animation for a specified amount of time. But, like many CSS properties, there&#8217;s more than meets the eye&#8230; Using animation-delay you can create a variety of complex and beautiful pure CSS animations with ease, by applying it to a set of otherwise identical elements at varying time values.<\/p>\n<p>All of the following examples follow the same basic setup: a number of looping animated\u00a0elements are created, all of which are identical save for a unique numeric class which allows each element to be selected individually via CSS. Using this, a different animation-delay time can applied to each element, causing\u00a0each animation to run asynchronously\u00a0with the others to create various effects. I&#8217;ll go into more detail\u00a0in the examples, below.<br \/>\n<!--more--><\/p>\n<h2>Basic Example: Loading Dots<\/h2>\n<p class=\"codepen\" data-height=\"465\" data-theme-id=\"0\" data-slug-hash=\"KqmMXE\" data-default-tab=\"css,result\" data-user=\"sebastianlenton\" data-embed-version=\"2\" data-pen-title=\"CSS animation-delay Basic Example: Loading Dots\" data-preview=\"true\">See the Pen <a href=\"https:\/\/codepen.io\/sebastianlenton\/pen\/KqmMXE\/\">CSS animation-delay Basic Example: Loading Dots<\/a> by Sebastian Lenton (<a href=\"https:\/\/codepen.io\/sebastianlenton\">@sebastianlenton<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/production-assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>This\u00a0example demonstrates how to use this technique to make a simple CSS loading animation. The steps to create this are as follows:<\/p>\n<ul>\n<li>Create a number of \u00a0elements all of the same class, in this case &#8220;loadingDot&#8221;. Position them however you like.<\/li>\n<li>Create a CSS keyframe animation, and assign it\u00a0to the .loadingDot class. Animate this however you like- in this instance I&#8217;m animating transform: scale.<\/li>\n<li>Add a unique class to each element: in this case, I&#8217;ve assigned .loadingDot\u2011\u20111, .loadingDot\u2011\u20112 etc. (Remember that a class name cannot start with a number).<\/li>\n<li>Finally, add the animation-delay property to each unique class, with a different delay time for each one. Ensure that the delay times are incrementing with a set interval for a cleaner looking animation (eg .10s, .20s, .30s etc), although you can choose whichever interval you like.<\/li>\n<\/ul>\n<p>We can use the\u00a0same technique to make more complex animations- find more examples below. Note, going forwards\u00a0I will be\u00a0using Sass and Haml to automate creating\u00a0some of the HTML &amp; CSS. Don&#8217;t worry if you&#8217;re unfamiliar with either of these- you can\u00a0view the compiled HTML &amp; CSS in all the following examples, which shows how it would look had it been written by hand.<\/p>\n<h2>Negative animation-delays: Falling Rain<\/h2>\n<p class=\"codepen\" data-height=\"465\" data-theme-id=\"0\" data-slug-hash=\"eRWzwJ\" data-default-tab=\"css,result\" data-user=\"sebastianlenton\" data-embed-version=\"2\" data-pen-title=\"Negative animation-delay Example: Falling Rain\" data-preview=\"true\">See the Pen <a href=\"https:\/\/codepen.io\/sebastianlenton\/pen\/eRWzwJ\/\">Negative animation-delay Example: Falling Rain<\/a> by Sebastian Lenton (<a href=\"https:\/\/codepen.io\/sebastianlenton\">@sebastianlenton<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/production-assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>This next example uses negative\u00a0animation-delay values, which has a subtly different effect to using a positive value. Using a negative animation-delay value makes\u00a0an animation commence at that\u00a0point during its keyframe sequence.\u00a0This is\u00a0essential for something like the falling rain effect above, which wouldn&#8217;t work if we had to wait for some of the\u00a0elements to start animating.<\/p>\n<p>The steps to create this are as follows:<\/p>\n<ul>\n<li>Set html and body to 100% height.<\/li>\n<li>Create a number of \u00a0elements all of the same class, in this case &#8220;raindrop&#8221;.\u00a0The .raindrop class should use position: absolute, with top and left set to 0. Aside from that they can be styled however you like, although\u00a0don&#8217;t make them too big.<\/li>\n<li>Add\u00a0a unique class to each element: in this case, .raindrop\u2011\u20111, .raindrop\u2011\u20112, etc). In this example I&#8217;ve used HAML to automate the above two steps, to avoid writing out large amounts of HTML manually.<\/li>\n<li>Create a CSS keyframe animation, animating transform: translate to make an element fall from the top of the screen to the bottom.<\/li>\n<li>Assign the keyframe animation to the .raindrop class. Ensure that a linear timing function is being used, and that the animation is set to loop infinitely.<\/li>\n<li>Create the unique CSS class selectors (.raindrop\u2011\u20111, etc) and add a random negative animation-delay to each one. The value doesn&#8217;t matter so much, so long as\u00a0the random values are evenly spread and are lower than or equal to the animation&#8217;s duration.<\/li>\n<li>Add a random position: left value to each unique raindrop class,\u00a0in order to space the raindrops along the X-axis. Each value\u00a0should be between 0% and 100%. Note, I&#8217;ve used Sass to automate the above two steps, to avoid writing out large amounts of CSS manually.<\/li>\n<\/ul>\n<p>You should now be seeing a\u00a0shower of raindrops falling down on your screen. This effect perhaps looks a little boring in its\u00a0raw state, but with a few changes you can make more interesting effects such as <a href=\"https:\/\/codepen.io\/sebastianlenton\/pen\/QdxajP\" target=\"_blank\" rel=\"noopener noreferrer\">a starfield<\/a> or <a href=\"https:\/\/codepen.io\/sebastianlenton\/pen\/QdaWvj\" target=\"_blank\" rel=\"noopener noreferrer\">falling snow<\/a>.<\/p>\n<p>If you&#8217;re still confused about how negative animation-delay affects things, try flipping\u00a0the animation-delay values from negative to positive and notice how the animation changes.<\/p>\n<h2>Fixed animation-delay\u00a0Intervals: 8Bit 3D Road<\/h2>\n<p class=\"codepen\" data-height=\"465\" data-theme-id=\"0\" data-slug-hash=\"jwmMwb\" data-default-tab=\"css,result\" data-user=\"sebastianlenton\" data-embed-version=\"2\" data-pen-title=\"Fixed animation-delay Intervals: 8Bit 3D Road\" data-preview=\"true\">See the Pen <a href=\"https:\/\/codepen.io\/sebastianlenton\/pen\/jwmMwb\/\">Fixed animation-delay Intervals: 8Bit 3D Road<\/a> by Sebastian Lenton (<a href=\"https:\/\/codepen.io\/sebastianlenton\">@sebastianlenton<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/production-assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>This final example increments animation-delay\u00a0values on a fixed interval\u00a0in order to create a perfectly looping animation. The interval is calculated via\u00a0(number of elements \/ animation duration), then each animation-delay value is set to ( interval * element number\u00a0).<\/p>\n<p>Don&#8217;t worry if this sounds confusing. The following steps outline the process of constructing this animation, although we&#8217;ll be moving more quickly than before:<\/p>\n<ul>\n<li>Set the body to be a 3D projection, so we can transform child elements on the Z-axis (to simulate 3D movement into the screen).<\/li>\n<li>As previously, create a number of elements of the same class, each with an additional unique class (in this case, &#8220;roadStrip&#8221; and &#8220;roadStrip\u2011\u20111&#8221;, etc). The roadStrip class should be positioned at the bottom of the viewport, but otherwise style it however you like.<\/li>\n<li>Create a keyframe animation which animates a transform along the\u00a0Z-axis. In this example I&#8217;m also animating opacity, to fade the roadStrips in and out at the beginning and end of the animation, although this isn&#8217;t essential. Assign this to the roadStrip class.<\/li>\n<li>Work out your interval value by calculating<strong>\u00a0<\/strong>animation duration \/ total quantity of roadStrips.<\/li>\n<li>Apply animation-delay to each unique roadStrip class. Each animation-delay value should be calculated as interval * roadStrip ID number.<\/li>\n<\/ul>\n<p>By now you should have a 3D road, moving into or out of the screen. Again, if you think the effect&#8217;s a little plain then it can be made\u00a0much more exciting with <a href=\"https:\/\/codepen.io\/sebastianlenton\/pen\/jwmoPV\" target=\"_blank\" rel=\"noopener noreferrer\">just a few tweaks<\/a>.<\/p>\n<h2>In Conclusion&#8230;<\/h2>\n<p>I hope you&#8217;ve enjoyed this tutorial, and learned that\u00a0it&#8217;s pretty easy to create a huge amount of different animations using this technique. <a href=\"https:\/\/www.sebastianlenton.com\/contact\/\">Drop me a line<\/a> if you have any questions, and have a look through\u00a0<a href=\"https:\/\/codepen.io\/sebastianlenton\" target=\"_blank\" rel=\"noopener noreferrer\">my Codepen<\/a> for some more examples.<\/p>\n<p class=\"codepen\" data-height=\"465\" data-theme-id=\"0\" data-slug-hash=\"EZBKvE\" data-default-tab=\"result\" data-user=\"sebastianlenton\" data-embed-version=\"2\" data-pen-title=\"Time Tunnel\" data-preview=\"true\">See the Pen <a href=\"https:\/\/codepen.io\/sebastianlenton\/pen\/EZBKvE\/\">Time Tunnel<\/a> by Sebastian Lenton (<a href=\"https:\/\/codepen.io\/sebastianlenton\">@sebastianlenton<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/production-assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The CSS animation-delay property is obviously used to delay the commencement of a CSS animation for a specified amount of time. But, like many CSS properties, there&#8217;s more than meets the eye&#8230; Using animation-delay you can create a variety of complex and beautiful pure CSS animations with ease, by applying it to a set of&#8230;  <a href=\"https:\/\/www.sebastianlenton.com\/2017\/06\/creating-css-animations-animation-delay\/\" title=\"Read Creating CSS Animations With animation-delay\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":2,"featured_media":469,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Creating CSS Animations With animation-delay - Sebastian Lenton<\/title>\n<meta name=\"description\" content=\"The CSS animation-delay property can be used to make complex and beautiful pure CSS looping animations. Learn how using this tutorial, including examples.\" \/>\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.sebastianlenton.com\/2017\/06\/creating-css-animations-animation-delay\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating CSS Animations With animation-delay - Sebastian Lenton\" \/>\n<meta property=\"og:description\" content=\"The CSS animation-delay property can be used to make complex and beautiful pure CSS looping animations. Learn how using this tutorial, including examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.sebastianlenton.com\/2017\/06\/creating-css-animations-animation-delay\/\" \/>\n<meta property=\"og:site_name\" content=\"Sebastian Lenton\" \/>\n<meta property=\"article:published_time\" content=\"2017-06-21T15:27:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.sebastianlenton.com\/wp-content\/uploads\/2017\/06\/swirly.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1776\" \/>\n\t<meta property=\"og:image:height\" content=\"1320\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Seb Lenton\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@sebastianlenton\" \/>\n<meta name=\"twitter:site\" content=\"@sebastianlenton\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Seb Lenton\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.sebastianlenton.com\/2017\/06\/creating-css-animations-animation-delay\/\",\"url\":\"https:\/\/www.sebastianlenton.com\/2017\/06\/creating-css-animations-animation-delay\/\",\"name\":\"Creating CSS Animations With animation-delay - Sebastian Lenton\",\"isPartOf\":{\"@id\":\"https:\/\/www.sebastianlenton.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.sebastianlenton.com\/2017\/06\/creating-css-animations-animation-delay\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.sebastianlenton.com\/2017\/06\/creating-css-animations-animation-delay\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.sebastianlenton.com\/wp-content\/uploads\/2017\/06\/swirly.jpg\",\"datePublished\":\"2017-06-21T15:27:06+00:00\",\"dateModified\":\"2017-06-21T15:27:06+00:00\",\"author\":{\"@id\":\"https:\/\/www.sebastianlenton.com\/#\/schema\/person\/07ad65c2a7050417b92f404e980c3be1\"},\"description\":\"The CSS animation-delay property can be used to make complex and beautiful pure CSS looping animations. Learn how using this tutorial, including examples.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.sebastianlenton.com\/2017\/06\/creating-css-animations-animation-delay\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.sebastianlenton.com\/2017\/06\/creating-css-animations-animation-delay\/#primaryimage\",\"url\":\"https:\/\/www.sebastianlenton.com\/wp-content\/uploads\/2017\/06\/swirly.jpg\",\"contentUrl\":\"https:\/\/www.sebastianlenton.com\/wp-content\/uploads\/2017\/06\/swirly.jpg\",\"width\":1776,\"height\":1320},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.sebastianlenton.com\/#website\",\"url\":\"https:\/\/www.sebastianlenton.com\/\",\"name\":\"Sebastian Lenton\",\"description\":\"Freelance web development &amp; design, Birmingham UK\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.sebastianlenton.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.sebastianlenton.com\/#\/schema\/person\/07ad65c2a7050417b92f404e980c3be1\",\"name\":\"Seb Lenton\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating CSS Animations With animation-delay - Sebastian Lenton","description":"The CSS animation-delay property can be used to make complex and beautiful pure CSS looping animations. Learn how using this tutorial, including examples.","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.sebastianlenton.com\/2017\/06\/creating-css-animations-animation-delay\/","og_locale":"en_GB","og_type":"article","og_title":"Creating CSS Animations With animation-delay - Sebastian Lenton","og_description":"The CSS animation-delay property can be used to make complex and beautiful pure CSS looping animations. Learn how using this tutorial, including examples.","og_url":"https:\/\/www.sebastianlenton.com\/2017\/06\/creating-css-animations-animation-delay\/","og_site_name":"Sebastian Lenton","article_published_time":"2017-06-21T15:27:06+00:00","og_image":[{"width":1776,"height":1320,"url":"https:\/\/www.sebastianlenton.com\/wp-content\/uploads\/2017\/06\/swirly.jpg","type":"image\/jpeg"}],"author":"Seb Lenton","twitter_card":"summary_large_image","twitter_creator":"@sebastianlenton","twitter_site":"@sebastianlenton","twitter_misc":{"Written by":"Seb Lenton","Estimated reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.sebastianlenton.com\/2017\/06\/creating-css-animations-animation-delay\/","url":"https:\/\/www.sebastianlenton.com\/2017\/06\/creating-css-animations-animation-delay\/","name":"Creating CSS Animations With animation-delay - Sebastian Lenton","isPartOf":{"@id":"https:\/\/www.sebastianlenton.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.sebastianlenton.com\/2017\/06\/creating-css-animations-animation-delay\/#primaryimage"},"image":{"@id":"https:\/\/www.sebastianlenton.com\/2017\/06\/creating-css-animations-animation-delay\/#primaryimage"},"thumbnailUrl":"https:\/\/www.sebastianlenton.com\/wp-content\/uploads\/2017\/06\/swirly.jpg","datePublished":"2017-06-21T15:27:06+00:00","dateModified":"2017-06-21T15:27:06+00:00","author":{"@id":"https:\/\/www.sebastianlenton.com\/#\/schema\/person\/07ad65c2a7050417b92f404e980c3be1"},"description":"The CSS animation-delay property can be used to make complex and beautiful pure CSS looping animations. Learn how using this tutorial, including examples.","inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.sebastianlenton.com\/2017\/06\/creating-css-animations-animation-delay\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.sebastianlenton.com\/2017\/06\/creating-css-animations-animation-delay\/#primaryimage","url":"https:\/\/www.sebastianlenton.com\/wp-content\/uploads\/2017\/06\/swirly.jpg","contentUrl":"https:\/\/www.sebastianlenton.com\/wp-content\/uploads\/2017\/06\/swirly.jpg","width":1776,"height":1320},{"@type":"WebSite","@id":"https:\/\/www.sebastianlenton.com\/#website","url":"https:\/\/www.sebastianlenton.com\/","name":"Sebastian Lenton","description":"Freelance web development &amp; design, Birmingham UK","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.sebastianlenton.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.sebastianlenton.com\/#\/schema\/person\/07ad65c2a7050417b92f404e980c3be1","name":"Seb Lenton"}]}},"_links":{"self":[{"href":"https:\/\/www.sebastianlenton.com\/wp-json\/wp\/v2\/posts\/457"}],"collection":[{"href":"https:\/\/www.sebastianlenton.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sebastianlenton.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sebastianlenton.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sebastianlenton.com\/wp-json\/wp\/v2\/comments?post=457"}],"version-history":[{"count":0,"href":"https:\/\/www.sebastianlenton.com\/wp-json\/wp\/v2\/posts\/457\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sebastianlenton.com\/wp-json\/wp\/v2\/media\/469"}],"wp:attachment":[{"href":"https:\/\/www.sebastianlenton.com\/wp-json\/wp\/v2\/media?parent=457"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sebastianlenton.com\/wp-json\/wp\/v2\/categories?post=457"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sebastianlenton.com\/wp-json\/wp\/v2\/tags?post=457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}