web-dev-qa-db-ja.com

ホバー時にWebKitアニメーションを一時停止する

私は、次のようにマウスオーバーで一時停止するアニメーションを取得しようとしています：

.quote:nth-child(1):hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

しかし、一時停止する必要はありません。誰かが私が間違っていることを見ることができますか？

[〜＃〜] jsfiddle [〜＃〜]

cssanimationcss-animations
26
user2760221

の代わりに：

.quote:nth-child(1):hover 
{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

使用する：

.quote-wrapper:hover .quote 
{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
}

[〜＃〜] demo [〜＃〜]： http://jsfiddle.net/j4Abq/2/

57
tomsullivan1989

解決策が見つかったようです。ただし、アニメーションを一時停止し、最初にリセットする問題に対する別の簡単なソリューションを提供します。

「一時停止」してアニメーションの初期状態に戻るには、次を使用します。

<selector>:hover {
    animation: step-end;
}

フォントの色を暗い色から明るい色に無限に変更するアニメーションを実行していましたが、「ステップエンド」を使用してその上にマウスを移動すると、アニメーションが一時停止し、最初の暗い色に瞬時に切り替わり、ポインターが離れると再開しました。

これが他の人に役立つことを願っています。 :-)

6
JohnnyAce