Grow your CSS skills. Land your dream job.

Starting CSS Animations Mid-Way

Published by Chris Coyier

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 at different times, but they will still all start at the same place.

Fortunately, there is a way.

The trick is to use negative animation-delay. That will begin an animation right away, but as if part of the animation has run already.

For instance, here's three elements:

<div class="thing thing-1"></div>
<div class="thing thing-2"></div>
<div class="thing thing-3"></div>

They are 300px wide. We're going to animate them all the way across the screen:

@keyframes moveAcross {
  0% {
    left: -300px;
  }
  100% {
    left: 100%;
  }
}

They all use this animation, meaning they would all start at the same place:

.thing {
  width: 300px;
  position: absolute;
  top: 0;
  left: 0;
  animation: moveAcross 10s linear infinite;
}

To change them to start at different place along the keyframe timeline, we apply those negative delays:

.thing-1 {
  animation-delay: -1s;
}
.thing-2 {
  animation-delay: -2s;
}
.thing-3 {
  animation-delay: -3s;
}

Another little trick: to test those starting positions, just stop the animation (you'll essentially just be seeing the first frame):

.car {
  ...
  animation-play-state: paused;
}

Paused


Running

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.

For fun, different durations as well:

See the Pen hjbKp by Chris Coyier (@chriscoyier) on CodePen.

Comments

  1. John Stewart
    Permalink to comment#

    I think this is a cool trick but would you consider this a good way to handle trying to create such timing/positioning for animations or possibly just adjust the starting position for each with delays? Don’t care either way here just wondering your thoughts.

  2. Another complicated example of animation-delay → hxxp://cssdeck.com/labs/full/css3-animated-typography

  3. OMG! This is so awesome! Definitely worth exploring more in detail! ;)

  4. Permalink to comment#

    If you want them to be Ferrari, use replace the keyframes with the below ones. :D :D :D :P

    @keyframes moveAcross {
    0% {
    left: -30000px;
    }
    100% {
    left: 110%;
    }
    }

  5. Permalink to comment#

    I don’t know, it’s not working in Chrome. That’s weird. @chris, can you tell me how to increase the speed if the above method is not working for some reason?

  6. Hafeez Ansari
    Permalink to comment#

    Awesome animation trick. You are doing a good job. Thanks for sharing.

  7. Funny. I just made a pen the other week demonstrating this exact thing.

    I was using it to make a CSS powered loading spinner.

  8. Permalink to comment#

    Looks like it’s working everywhere. Great stuff!

  9. Gupitan
    Permalink to comment#

    Awesome!

  10. BrianMB
    Permalink to comment#

    Please, please, PLEASE do not use left for animation.

    • I have some information about that here: http://css-tricks.com/tale-of-animation-performance/

      But careful, this has that dogmatic feel to it. The alternative, translateX, is relative to itself not the relative parent, so it’s hard to animate something exactly across that distance, for example, if you don’t know what that distance is.

    • BrianMB
      Permalink to comment#

      While useful info, the perf situation is really not as gray as that article implies. Animating with left will always be janky on mobile (this statement may not apply if your smartphone has a CPU from the far future).

      translateX, is relative to itself not the relative parent, so it’s hard to animate something exactly across that distance

      True, if you’re using percentage values. This is a good argument against using CSS Animations for something so dynamic (I would go for CSS Transitions+JS). In my opinion, performance trumps all of that.

  11. what should I do again , I’m confused , can provide input master I become like a master , sorry if I am wrong to speak , because I am not good at speaking English

  12. MAX
    Permalink to comment#

    I am totally amazed with the animation you made sir. I want to make a moving cloud animation for my blog. Can I make it ? 

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".