ホバー時にアニメーションを一時停止し、マウスが離れるとアニメーションを継続する方法

Question

私はいくつかの解決策にうんざりしましたが、これが私が得た最も近い解決策です。 しかし、この結果にはまだ満足していません。マウスが要素から離れると、要素は元の回転に戻ってしまうからです。 要素の上に移動すると、マウスが要素から離れた場合でもアニメーションがトリガーされるという考えです。要素の上にマウスを移動すると、アニメーション化されて 0 度に留まり、マウスが離れると別のアニメーションが再生され、-8 度に回転して戻ります。

リーリー リーリー リーリー

＃＃＃助けてくれてありがとう。

マウスが要素から離れると、スムーズなアニメーションが元の回転に戻ります。

Answer 1

純粋な CSS ソリューション (2 番目のアニメーションを防止する必要があります)

JS や特別なクラスは必要ありません。 transform と transition-duration で十分です。

HTML から始めましょう。これはまだコードですが、簡略化されています:

リーリー

さあ、肝心のCSSです。カードはデフォルトで -8 度回転するため、これを行うルールを追加しました:

リーリー

.Polaroid をその上に置くと、回転して 0 度に戻ります。これは、疑似クラス :hover: を使用できることを意味します。 リーリー

マウスを

.poloid から遠ざけると、:hover ルールは適用されなくなります。これは、マウスが離れてから 0.25 秒後に開始され、1 秒以内に前のルールに戻ることを意味します。 ＃＃＃それを試してみてください：＃＃＃

リーリー リーリー

2 番目のアニメーションが停止しないようにする

リカバリが停止しないようにするには、いくつかの JS が必要です。

最初に、いくつかの定数を宣言します。

リーリー

次にハンドラーを作成します:

リーリー

これを

'mouseover'

/

'mouseleave' のイベント ハンドラーとして追加すると完了です: リーリー ＃＃＃それを試してみてください：＃＃＃

リーリー リーリー リーリー