为什么这个简单的 CSS 动画不起作用？

【问题标题】：Why this simple CSS animation not working?为什么这个简单的 CSS 动画不起作用？
【发布时间】：2012-09-01 09:06:20
【问题描述】：

我创建了一个 JSFiddle 来显示我的问题。

http://jsfiddle.net/sqMT6/1/

当你点击一个段落时，'hidden' 类被设置，所以应该播放一个 webkit 动画，段落应该在 5 秒内消失。

类已设置，动画不播放。

我一定错过了一些非常简单的事情。

谁能指出来？

谢谢

【问题讨论】：

我使用的是 Chrome，因为它支持 webkit。

标签： animation css webkit

【解决方案1】：

尝试在 @keyframe 规则中删除 from/to 属性之前的冒号。

原始 CSS

@-webkit-keyframes appear{
    from:{opacity: 0;}
    to: {opacity: 1;}
}

@-webkit-keyframes disappear{
    from:{opacity: 1;}
    to: {opacity: 0;}
}

固定 CSS

@-webkit-keyframes appear{
    from {opacity: 0;}
    to {opacity: 1;}
}

@-webkit-keyframes disappear{
    from {opacity: 1;}
    to  {opacity: 0;}
}

示例：http://jsfiddle.net/sqMT6/3/

【讨论】：

谢谢！我花了大约一个小时！