• Status: Open
  • Priority: High
  • Security: Public
  • Views: 39
  • Last Modified:

CSS: How to Sequence 2 Animations

What is the correct syntax to cause the 2nd animation to start after the first one finishes:

@keyframes toColor {
    0%    { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
    25%   { -webkit-filter: grayscale(75%); filter: grayscale(75%); }
    50%   { -webkit-filter: grayscale(50%); filter: grayscale(50%); }
    75%   { -webkit-filter: grayscale(25%); filter: grayscale(25%); }
    100%  { -webkit-filter: grayscale(0%); filter: grayscale(0%); }

@-webkit-keyframes myMove {
    0%   { -webkit-transform: scale(1); }
/*    50%  { -webkit-transform: translate3d(0, 0, 0);} */
/*    100% { -webkit-transform: scale(.5), translate3d(-450px, -350px, 0);} */
    100% { -webkit-transform: scale(.5);}

.MyClass #t3-content img {
    margin: auto;
    width: 50%;
    height: auto;
    animation: toColor 4s;
    animation: MyMove 2s;  /*this one overules the first animation*/
/* either one of the above animations will work on their own but not sequenced as above */
  • 2
Steve BinkCommented:
You can't assign more than one animation to an element, but you can intercept the animationend event and assign a new one.  This means coding some JS to build that bridge.
qengAuthor Commented:
Steve, thx for getting back.

Maybe what I am looking for is to add multiple 'steps' to one animation ... some examples of what I'm trying to do but haven't figured out how to code:


And under the section "Keyframes are interpolated and tweened ..." and "Adding multiple steps to transitions ..." in this reference:


One of the examples in this last link above shows a red square going to an orange rectangle and changing its contained text.  This is triggered by a hover but I'm assuming it could be triggered by a page load event in css instead of hover.

What I'm trying to do is to desaturate a large logo (one step) and reposition it (another step) and add then add some text (last step).

I can't figure out how to code it (I'm new to the CSS animation game).
Steve BinkCommented:
Basically, you create one animation, but with enough steps to do all the things you want to do.  That css-tricks example is a good place to start.  Their box goes from orange to blue to black.  Imagine if it just went from orange to blue, and instead of going from blue to black it went from left:0 to left:100.  Now you have two animations which appear to fire one after the other.  

The trick here is to plan out your animations by frames - just like a story board - then translate those changes into animation keyframe points.  Take a look at https://jsfiddle.net/05dc8he8/13/ for an example.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now