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

基本上，我希望玩家：

在游戏加载时拉回他的手臂（动臂动画）
在点击“播放”按钮时显示他的手臂（手臂动画）注意：我希望玩家在一段时间后显示手臂，此时此操作是通过window.setTimeout实现的，但我想使用动画延迟属性
延迟后显示手形（揭示动画，在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;
}

但是当我尝试为点（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课程，并且您已left: 5em;你的arm课程。

将“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添加了一些时间，因此它没有出现在手臂之前）。奇怪的是，它有时会因为你说而失败，但不是每次......

CSS动画延迟不按预期工作

1 个答案: