Html 动画延迟将不会添加

我试图通过添加动画延迟属性在翻转动画上创建延迟，如下所示：

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

然而，这对我一点也不起作用。有更好的方法吗

---

代码笔

您使用的是过渡，而不是动画

---

尝试使用

过渡延迟

而不是

动画延迟

谢谢（：甚至不知道有什么不同。@Tony如果它们相似，请将动画视为一组一个或多个过渡，使用动画，您必须定义动画关键帧，但通过这种方式，您可以过渡多个属性，并对每个过渡步骤有更多的控制权。感谢您的精彩参考！