Two animations on same element not working - css

Question

Fiddle | Source
At #lt, I used two animations,
animation: fadeInStamp .5s linear 1 normal both;
animation: leftArrowBounce .5s linear 1.5s 1 normal both;
But it doesn't work, even the first animation doesn't show work.
But if I remove the second one, the first starts working
CSS
#lt {
opacity: 0;
transform: scale(4);
animation: fadeInStamp .5s linear 1 normal both;
animation: leftArrowBounce .5s linear 1.5s 1 normal both;
}
#keyframes fadeInStamp {
0% { opacity: 0; }
30% { opacity: 1; }
60% { transform: scale(.7); }
80% { transform: scale(1.3); }
100% { opacity: 1; transform: scale(1); }
}
#keyframes leftArrowBounce {
0% { }
50% { transform: translateX(-10px); }
100% { transform: translateX(0); }
}
HTML
<div id="lt"><</div>

Answer 1

animation is like any other CSS, if you specify a new value for the property then it will (depending on specificity) override the old one. So when you include your leftArrowBounce animation, the fadeInStamp animation is being ignored.
In this case, you're not seeing anything happen because your element has an opacity of 0, but the leftArrowBounce animation is occuring as you can see by setting opacity: 1;:
http://jsfiddle.net/yfZ5k/1/
The size (i.e. scale) is also changing here because your leftArrowBounce is overwriting the transform property, and hence scale gets reset as part of the leftArrowBounce animation.
To include multiple animations, you can just comma-seperate them:
animation: fadeInStamp .5s linear 1 normal both,
leftArrowBounce .5s linear 1.5s 1 normal both;
HOWEVER, it seems that this is currently buggy when used in conjunction with a delay value. Certainly for Chrome:
https://code.google.com/p/chromium/issues/detail?id=178413
ALSO, the fact that you're changing transform in both animations, and have both of them with an animation-fill-mode set to both causes issues. It works in Firefox, Opera and IE using:
animation: fadeInStamp .5s linear 0s 1 normal forwards,
leftArrowBounce .5s linear 1.5s 1 normal forwards;
Along with setting the first frame of leftArrowBounce explicitly:
#keyframes leftArrowBounce {
0% { transform: translateX(0); }
50% { transform: translateX(-10px); }
100% { transform: translateX(0); }
}
DEMO: http://jsfiddle.net/yfZ5k/6/ (again, doesn't currently work in chrome)

Answer 2

Wrap one animation element with other
<div id="wrap-lt">
<div id="lt">
<
</div>
</div>
then add animation to each element
#wrap-lt {
display: inline-block;
vertical-align: bottom;
font: normal 15em/300px sans-serif;
color: #333;
opacity: 0;
-webkit-transform: scale(4);
-moz-transform: scale(4);
-ms-transform: scale(4);
-o-transform: scale(4);
transform: scale(4);
-webkit-animation: fadeInStamp .5s linear 1 normal both;
-moz-animation: fadeInStamp .5s linear 1 normal both;
-ms-animation: fadeInStamp .5s linear 1 normal both;
-o-animation: fadeInStamp .5s linear 1 normal both;
animation: fadeInStamp .5s linear 1 normal both;
}
#wrap-lt #lt{
-webkit-animation: leftArrowBounce .5s linear 1.5s 1 normal both;
-moz-animation: leftArrowBounce .5s linear 1.5s 1 normal both;
-ms-animation: leftArrowBounce .5s linear 1.5s 1 normal both;
-o-animation: leftArrowBounce .5s linear 1.5s 1 normal both;
animation: leftArrowBounce .5s linear 1.5s 1 normal both;
}
DEMO