スタッフブログ

CSSアニメーションを一時停止する方法

2025年01月17日（金）

こんにちは。田村です。

CSSアニメーションをしているときに、「アニメーションを一時停止させたい」「特定のタイミングで再開したい」といった場合がありました。
そんな場合は、animation-play-stateプロパティを使うと実現可能です。

animation-play-state とは？

animation-play-stateは、CSSアニメーションの再生・停止を制御するプロパティです。

どんな場面で使えるのか？

ユーザー操作に応じてアニメーションを制御
ホバー時に一時停止する。
クリックやイベントに応じて再生/停止を切り替える。

基本的な使い方

.element {
    animation: fade-in 2s linear infinite; /* アニメーションの設定 */
 　animation-play-state: running;      /* 初期値は再生中 */
}

/* ホバー時にアニメーション停止 */
.element:hover {
    animation-play-state: paused;
}