html - Animation Delay 不会加

Question

我正在尝试通过添加动画延迟属性来为我的翻转动画创建延迟:

.flip-container:hover .flipper {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -webkit-animation-delay: 2s;
    /* Safari 4.0 - 8.0 */
    animation-delay: 2s;
}

.flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    position: relative;
    -webkit-animation-delay: 2s;
    /* Safari 4.0 - 8.0 */
    animation-delay: 2s;
}

然而，这对我来说丝毫没有用。有没有更好的方法？

代码笔 here

Answer 1

你使用的是过渡而不是动画

尝试使用 transition-delay 而不是 animation-delay。