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/