CSSアニメーションのリスタート方法

CSSで要素をアニメーションするときに、いったんアニメーションを途中で止めて最初からアニメーションをリスタート(再スタート)する方法を述べます。

例)ボタンを押したときに、アニメーションを記述したCSSのclassを追加して要素をアニメーションするとき

[HTML]

[CSS]

 [JavaScript]

上記の場合、ボタンを2回以上押した2回目以降のアニメーションは、前のclassが残っているため、アニメーションができません。

そこで、アニメーションの終了を検知して、classを削除する方法が考えられますが、その方法の場合、現在のアニメーションが終了するまで、次のアニメーションを始めることができません。

そこで、下記のようにclassを追加する前にclassを削除する方法が考えられます。

しかし、これでもアニメーションができません。

そこで、次にいったん要素自体を削除して、改めて要素を追加する方法が考えられます。

これでアニメーションを再度初めからリスタートできます。下記サイトを参考にしてください。

Restart CSS Animation

ただこの方法は、プログラムが複雑な場合に組み込むのが厄介なときがあります。

そこで、下記のようにすると簡単にアニメーションのリスタートができます。


動作の様子です。

以上がCSSアニメーションのリスタート方法となります。

スポンサーリンク