2

アニメーション化する@-webkit-keyframeのセットがある要素があります。ページの読み込み時に、これらのキーフレームが実行され、イントロは見栄えがします。

次に、ホバーに@ -webkit-keyframeの2番目のセットがあり、繰り返すように設定しているので、ホバーすると、その要素にループアニメーションがあります。それもうまくいきます。

ただし、マウスを要素から離すとすぐに、最初の（イントロ）キーフレームのセットが再び実行されます。最初に実行した後に実行したくありません。CSSでこれを防ぐ簡単な方法はありますか？

私が持っているものの最小限の例

#e { -webkit-animation: fadeIn 1s ease-out 0.5s; } /* Fades in on load, BUT gets called when mouse moves away as well */
#e:hover { -webkit-animation: pulse 1s ease-in-out 0s infinite alternate; } /* Works fine, pulses on hover */

また、1500以上の評判を持つ人がタグを編集して、webkit-animationタグを追加できますか？まだ作成されていないなんて信じられない…：\

4

1 に答える 1

3

必要なものを実現するための純粋な CSS の方法はありません。アニメーションを親要素またはラッパーに追加して、各要素を個別にアニメーション化できます。

.wrapper {
    -webkit-animation: fadeIn .5s ease-out 0 1;
}
#e { 
    width: 100px;
    height: 100px;
    background-color: #000;
}
#e:hover { 
    -webkit-animation: pulse 100ms ease-in-out 0s infinite alternate; 
} 
@-webkit-keyframes fadeIn {
        0%   { opacity: 0; }
        100% { opacity: 0.5;}
}

@-webkit-keyframes pulse {
        0%   { background-color: #000; }
        100% { background-color: #c00; }
}

http://jsfiddle.net/3PuT2/

于 2011-10-20T04:47:58.873 に答える