こんにちは。田村です。
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;
}
animation-play-state - CSS: カスケーディングスタイルシート | MDN
MDN Web Docs
animation-play-state は CSS のプロパティで、アニメーションが実行中か停止中かを設定します。
"animation-play-state" | Can I use... Support tables for HTML5, CSS3, etc
caniuse
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
まとめ
animation-play-state は、CSSアニメーションの再生/停止を簡単に制御できる便利なプロパティです。
ユーザー操作や環境設定に応じて、動きを制御できるのでアクセシビリティ対応にも役立ちます。
関連するタグ
全 1 件中 1 〜 1 件目を表示
この記事を書いた人
たむら しょうご
HTML&CSSコーダー
ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。
