0

私は次のようなcss3を持っています:

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
img.fadeInDown:hover{
   -webkit-transform-origin: top center;
   -moz-transform-origin: top center;
   -o-transform-origin: top center;
   transform-origin: top center;
   -webkit-animation: fadeInDown 1s ease-in-out;
   -moz-animation: fadeInDown 2s ease-in-out;
   -o-animation: fadeInDown 2s ease-in-out;
   animation: fadeInDown 2s ease-in-out;
}

に適用されます

<a  href="#" target="_blank" title="bing">
   <img class="fadeInDown" src="http://www.consortemarketing.com/wp-content/uploads/2011/10/bing-logo.png" /> 
</a>

ただし、何もアニメーション化されていません。フィドルを見て、解決するのを手伝ってもらえますか?

4

1 に答える 1

1

:hover最初のいくつかのアニメーションは、要素が移動している間、要素の上にマウスを置いておく必要があるため、主に使用するとうまく機能しません。

rollOut と fadeInDown は、ページの読み込み時にアクティブ化される場合、または他の要素が相互作用する場合に使用することをお勧めします。

:hover次に、次のように設定してアニメーションを有効にします。

.swing:hover{
   -webkit-transform-origin: top center;
   -moz-transform-origin: top center;
   -o-transform-origin: top center;
   transform-origin: top center;
   -webkit-animation: swing 2s ease-in-out;
   -moz-animation: swing 2s ease-in-out;
   -o-animation: swing 2s ease-in-out;
   animation: swing 2s ease-in-out;
}

.swing次に、スイングしたい要素にクラスを追加するだけです。

ホバー時にすべての画像をスイングさせたい場合:

    img:hover{
   -webkit-animation: swing 2s ease-in-out;
   -moz-animation: swing 2s ease-in-out;
   -o-animation: swing 2s ease-in-out;
   animation: swing 2s ease-in-out;
   }

これがjsFiddle Happy アニメーションです。

于 2013-04-02T21:23:05.513 に答える