1

トランジションとアニメーションに関しては、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;
}
4

1 に答える 1

1

トランジションとアニメーションを混在させているので、そうすべきではありません。

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

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

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

jsFiddleを少し変更し、アニメーションを削除し、トランジションを使用して回転を追加しました。リンクは次のとおりです。

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

于 2012-04-04T20:09:25.693 に答える