動畫延遲不會增加

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

絲毫這不是爲我工作。然而。有更好的方法嗎？

Codepen here

Answer 1

您正在使用的過渡不是動畫

使用transition-delay代替animation-delay嘗試。