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

Question

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

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

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

设置类，不播放动画。

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

有人可以指出吗？

谢谢

Answer 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/