CSS3トランジション/アニメーションが機能しない

Question

トランジションやアニメーションに関して、私はCSS3の周りを頭で覆そうとしています。私はいくつかのボックスを持っており、ボックスの上にマウスを置くと、タイトルと説明がアニメートされます。

これを動作させるには、ラッパー要素の：hoverイベントが発生したときに、アニメーションを定義する必要があると考えました。私は私のCSSでこれを正しく実行していないと思います。

http://jsfiddle.net/qXdNc/

.feature-box, .feature-box-title, .feature-box-image, .feature-box-desc { 
    -webkit-transition: all 300ms linear; 
    -moz-transition: all 300ms linear; 
    -o-transition: all 300ms linear; 
    -ms-transition: all 300ms linear; 
    transition: all 300ms linear; 
} 
.feature-box:hover .feature-box-title { 
    -webkit-animation: moveFromRight 300ms ease; 
    -moz-animation: moveFromRight 300ms ease; 
    -ms-animation: moveFromRight 300ms ease; 
} 
.feature-box:hover .feature-box-desc { 
    -webkit-animation: moveFromBottom 500ms ease; 
    -moz-animation: moveFromBottom 500ms ease; 
    -ms-animation: moveFromBottom 500ms ease; 
} 

Answer 1

あなたはそれを行うべきではない、アニメーションとトランジションを混合しています。

アニメーションのキーフレームmoveFromBottom,moveFromRightなどは、CSSで定義されていません。

遷移は、プロパティが変更されたときにどのようにDOMをアニメーション化するべきかを定義しますが、どのプロパティが変更されるかは定義しません。私はトランジションでアニメーションのショートカットと考えるのが好きです。

アニメーションははるかに複雑ですが、はるかに強力です。しかし、私はあなたが望むものを達成するためにアニメーションが必要ではないと思います。

jsFiddleを少し変更しました。アニメーションを削除し、トランジションを使用して回転を追加しました。ここにリンクがあります：

http://jsfiddle.net/canassa/qXdNc/1/