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 */
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.