Firefox CSS没有动画，但Chrome确实如此

Question

我有一个相对简单的小提琴，我已经搞砸了额外的@ -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和Internet Explorer正确地运行动画   无论显示状态如何

为了解决这个问题，您可以将animation设置为checked州，如下所示：

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