{"id":179881,"date":"2014-08-19T16:16:52","date_gmt":"2014-08-19T23:16:52","guid":{"rendered":"http:\/\/css-tricks.com\/?p=179881"},"modified":"2014-08-19T16:16:52","modified_gmt":"2014-08-19T23:16:52","slug":"starting-css-animations-mid-way","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/starting-css-animations-mid-way\/","title":{"rendered":"Starting CSS Animations Mid-Way"},"content":{"rendered":"

Say you have a @keyframe animation that animates an element all the way across the screen. From off the left edge to off the right edge. You apply it to multiple elements. But you don’t want all<\/em> the elements to start at the same exact position. <\/p>\n

You can change the animation-delay<\/code> so that they start at different times, but they will still all start<\/em> at the same place.<\/p>\n

Fortunately, there is a way.<\/p>\n

<\/p>\n

The trick is to use negative<\/em> animation-delay<\/code>. That will begin an animation right away, but as if part of the animation has run already.<\/p>\n

For instance, here’s three elements:<\/p>\n

<div class=\"thing thing-1\"><\/div>\r\n<div class=\"thing thing-2\"><\/div>\r\n<div class=\"thing thing-3\"><\/div><\/code><\/pre>\n
They are 300px wide. We’re going to animate them all the way across the screen:<\/p>\n
@keyframes moveAcross {\r\n  0% {\r\n    left: -300px;\r\n  }\r\n  100% {\r\n    left: 100%;\r\n  }\r\n}<\/code><\/pre>\n
They all use this animation, meaning they would all start at the same place:<\/p>\n
.thing {\r\n  width: 300px;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  animation: moveAcross 10s linear infinite;\r\n}<\/code><\/pre>\n
<\/figure>\n
To change them to start at different place along the keyframe timeline, we apply those negative delays:<\/p>\n
.thing-1 {\r\n  animation-delay: -1s;\r\n}\r\n.thing-2 {\r\n  animation-delay: -2s;\r\n}\r\n.thing-3 {\r\n  animation-delay: -3s;\r\n}<\/code><\/pre>\n
Another little trick: to test those starting positions, just stop the animation (you’ll essentially just be seeing the first frame):<\/p>\n
.car {\r\n  ...\r\n  animation-play-state: paused;\r\n}<\/code><\/pre>\n
Paused<\/figcaption><\/figure>\n
Running<\/figcaption><\/figure>\n
This probably comes in most useful with really slow animations where a straight delay would result in nothing or the wrong thing being shown too long.<\/p>\n
For fun, different durations as well:<\/p>\n
See the Pen hjbKp<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Say you have a @keyframe animation that animates an element all the way across the screen. From off the left edge to off the right edge. You apply it to multiple elements. But you don’t want all the elements to start at the same exact position. You can change the animation-delay so that they start […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":357239,"url":"https:\/\/css-tricks.com\/a-handy-little-system-for-animated-entrances-in-css\/","url_meta":{"origin":179881,"position":0},"title":"A Handy Little System for Animated Entrances in CSS","date":"November 26, 2021","format":false,"excerpt":"I love little touches that make a website feel like more than just a static document. What if web content wouldn\u2019t just \u201cappear\u201d when a page loaded, but instead popped, slid, faded, or spun into place? It might be a stretch to say that movements like this are always useful,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/pop-in.gif?fit=900%2C450&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":344147,"url":"https:\/\/css-tricks.com\/of-course-we-can-make-a-css-only-clock-that-tells-the-current-time\/","url_meta":{"origin":179881,"position":1},"title":"Of Course We Can Make a CSS-Only Clock That Tells the Current Time!","date":"July 16, 2021","format":false,"excerpt":"Let\u2019s build a fully functioning and settable \u201canalog\u201d clock with CSS custom properties and the calc() function. Then we\u2019ll convert it into a \u201cdigital\u201d clock as well. All this with no JavaScript! Here\u2019s a quick look at the clocks we\u2019ll make: https:\/\/www.youtube.com\/watch?v=Wzi2ogTMhqE& GitHub repo Brushing up on the calc() function\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1fpsekfFXE-vE42JrzL_uuA.jpeg?fit=1000%2C400&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":344497,"url":"https:\/\/css-tricks.com\/typewriter-animation-that-handles-anything-you-throw-at-it\/","url_meta":{"origin":179881,"position":2},"title":"Typewriter Animation That Handles Anything You Throw at It","date":"July 20, 2021","format":false,"excerpt":"I watched Kevin Powell\u2019s video where he was able to recreate a nice typewriter-like animation using CSS. It\u2019s neat and you should definitely check it out because there are bonafide CSS tricks in there. I\u2019m sure you\u2019ve seen other CSS attempts at this, including this site\u2019s very own snippet. Like\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/typewriter-animation-text.gif?fit=900%2C450&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":311206,"url":"https:\/\/css-tricks.com\/a-new-way-to-delay-keyframes-animations\/","url_meta":{"origin":179881,"position":3},"title":"A New Way to Delay Keyframes Animations","date":"June 2, 2020","format":false,"excerpt":"If you\u2019ve ever wanted to add a pause between each iteration of your CSS @keyframes animation, you\u2019ve probably been frustrated to find there\u2019s no built-in way to do it in CSS. Sure, we can delay the start of a set of @keyframes with animation-delay, but there's no way to add\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/shooting-stars.gif?fit=800%2C400&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":374345,"url":"https:\/\/css-tricks.com\/responsive-animations-for-every-screen-size-and-device\/","url_meta":{"origin":179881,"position":4},"title":"Responsive Animations for Every Screen Size and Device","date":"October 20, 2022","format":false,"excerpt":"Before I career jumped into development, I did a bunch of motion graphics work in After Effects. But even with that background, I still found animating on the web pretty baffling. Video graphics are designed within a specific ratio and then exported out. Done! But there aren\u2019t any \u201cexport settings\u201d\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/animation.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":352819,"url":"https:\/\/css-tricks.com\/animation-techniques-for-adding-and-removing-items-from-a-stack\/","url_meta":{"origin":179881,"position":5},"title":"Animation Techniques for Adding and Removing Items From a Stack","date":"October 4, 2021","format":false,"excerpt":"Animating elements with CSS can either be quite easy or quite difficult depending on what you are trying to do. Changing the background color of a button when you hover over it? Easy. Animating the position and size of an element in a performant way that also affects the position\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/stack-of-items.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/179881"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=179881"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/179881\/revisions"}],"predecessor-version":[{"id":179929,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/179881\/revisions\/179929"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=179881"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=179881"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=179881"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}