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所以它不手臂出現之前）。奇怪它有時會失敗，如你所說，但不是每次...