css - Firefox CSS 没有动画但 Chrome 有

Question

我有一个相对简单的 Fiddle，我用额外的 @-webkit- 和 @-moz- 重复搞砸了，但它在 Firefox 上仍然失败。

div.overlay-dialogue {  
    ...
    animation: ANIM_NAME 0.5s ease-in-out; 
} 

@keyframes ANIM_NAME {  
    0% { transform: rotateY(55deg); opacity: 0; }  
    100% { transform: rotateY(0deg); opacity: 1; }  
}

http://jsfiddle.net/pxpuL6ea/4/

谁能看出为什么？

Answer 1

我从另一个问题得到了答案:Firefox animation not starting on toggle display style

Firefox and Internet Explorer are rightfully running the animation regardless of the display state

因此，要解决此问题，您可以将animation 设置为checked 状态，如下所示:

input[type=checkbox]:checked ~ div.overlay-dialogue {  
    display: block;
    animation: ANIM_NAME 0.5s ease-in-out; 
    ...
}