Firefox CSS 没有动画，但 Chrome 有答案

【问题标题】：Firefox CSS doesn't animate but Chrome doesFirefox CSS 没有动画，但 Chrome 有
【发布时间】：2015-09-14 19:15:44
【问题描述】：

我有一个相对简单的 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/

谁能明白为什么？？

【问题讨论】：

这里是更简单的第一个版本，仍然可以在 Chrome 中运行：jsfiddle.net/vc8u4yvx
你可以看看这个问题：stackoverflow.com/questions/24589537/…

标签： css firefox animation

【解决方案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; 
    ...
}

【讨论】：