Question

I’m running into a problem. I’d simply like to, once one CSS3 animation has completed, have my next animation begin (ideally a fade in)

Here’s the first animation code:

#truck {
position: absolute;
margin-top:90px;

-moz-animation: slide 4s;
-webkit-animation: slide 4s;
-ms-animation: slide 4s;
animation: slide 4s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}

@keyframes slide {
0% { left: 0px; }
35% { left: 250px; }
65% { left: 250px; }
100% { left:590px; }
}

@-webkit-keyframes slide {
0% { left: 0px; }
35% { left: 250px; }
65% { left: 250px; }
100% { left:590px; }
}

@-ms-keyframes slide {
0% { left: 0px; }
35% { left: 250px; }
65% { left: 250px; }
100% { left:590px; }
}

If anyone can help me with the second animation and how to call that once the first one is completed, I would greatly appreciate it.

Answer 1

I think you can use delay:

animation-delay:4s;
-moz-animation-delay:4s; /* Firefox */
-webkit-animation-delay:4s; /* Safari and Chrome */
-o-animation-delay:4s; /* Opera */

(adjust number to fit)