How to play second CSS3 animation once first one finishes

[foogs]

I'm running 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:\[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; }}\[/code\]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. Thank you!