CSS animation-delay not working as expected - css

Question

I'm trying to implement this simple animation for a rock-paper-scissors game I'm developing:
http://jsfiddle.net/franciov/kbngz27s/1/
#keyframes arm-out {
from {
left: 0em;
}
to {
left: 5em;
}
}
.player > .arm.out {
animation-name: arm-out;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
Basically, I want the player to:
pull back his arm when the game loads (arm-in animation)
show his arm when the 'Play' button is clicked (arm-out animation) Note: I would like the player to show the arm after a while, at the moment this is implemented with a window.setTimeout but I would like to use the animation-delay property
show the hand shape after a delay (reveal animation, in JSFiddle the shape is always 'scissors')
The animation-delay for the point (3) works well:
#keyframes reveal {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.hand.reveal {
animation-name: reveal;
animation-delay: 0.5s;
animation-duration: 0.2s;
animation-fill-mode: forwards;
}
but when I try to add a animation-delay property for the point (2), things does not work properly anymore, as you can try on the next JSFiddle:
http://jsfiddle.net/franciov/kbngz27s/2/
.player > .arm.out {
animation-name: arm-out;
animation-delay: 0.8s; /* This is not working properly */
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
Any ideas?
I tried the JSFiddles above on Chrome 45.0.2454.101 and Firefox 43.0a2.

Answer 1

You simply have to add left: 0; to .arm.out, because at the moment you click the button, it removes the in class and you have left: 5em; in your arm class.
Set the left position of "out arm" to zero then let the animation do the job.
.player > .arm.out {
left: 0; /* Add this one. */
animation-name: arm-out;
animation-delay: 0.8s; /* This is working for me (Chrome 45) */
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
Fiddle : http://jsfiddle.net/kbngz27s/3/
(Added some time to .hand.reveal so it doesn't appear before the arm). Strangely it sometimes fails as you say, but not every time...