CSS动画延迟未正常工作

Question

我想实现的剪刀，石头，布的游戏这个简单的动画，我发展：

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; 
} 

基本上，我想要的玩家：

1. 回拉他的手臂时，游戏加载（ARM-动画）
2. 显示他的胳膊被点击按钮时，“播放”（手臂注意：我希望玩家在一段时间后显示手臂，此刻这是用window.setTimeout实现的，但我想用动画延迟属性
3. 显示手形后延迟（显示动画，在的jsfiddle形状始终是“剪刀”）

动画延迟的点（3）效果很好：

@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; 
} 

，但是当我尝试添加animation-延迟点（2）的属性，事情不能正常工作，因为你可以尝试下一个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; 
} 

任何想法？

我在Chrome 45.0.2454.101和Firefox 43.0a2上试过上面的JSFiddles。

Answer 1

您只需添加left: 0;到.arm.out，因为此刻你按一下按钮，它消除了in类，你必须在你的arm类left: 5em;。

将“out arm”的左侧位置设置为零，然后让动画完成作业。

.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; 
} 

小提琴：http://jsfiddle.net/kbngz27s/3/ （增加了一些时间来.hand.reveal所以它不手臂出现之前）。奇怪它有时会失败，如你所说，但不是每次...