cssアニメーションの一時停止ができる「animation-play-state」

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

cssでWEBページの装飾をするのは非常に便利で、その昔わざわざ角丸を画像で作ってテーブルタグと組み合わせて配置指定たことが、懐かしく思い出されます。
 

そしてcss3のバージョンになり、アニメーション機能や進化したtransform機能などが便利すぎて、事前に画像加工する必要もなくなり、素材をこねくり回して利用できるエコなシステムが構築できるようになりました。
 

そんな進化したcssを使って、スライドショー動画を作るライブラリを今作っているんですが、動画プレイヤーなので、途中停止が出来る仕組みを作る時にcssの「animation-play-state」という機能が便利だったので、今回はその機能のご紹介です。

animation-play-state

リファレンスページ
https://developer.mozilla.org/ja/docs/Web/CSS/animation-play-state
 

animationの補助機能である「animation-play-state」は、cssのanimation機能の停止と再生を定義することができる機能で、今回やろうとしている事のドンピシャ機能でした。
 

 

使い方も非常に簡単で、アニメーションを止めたいエレメントに上記の設定をするだけです。
アニメーションをさせたくないエレメントに事前にセットしてもいいし、動作中にクリックなどのイベントと組み合わせて切り替えると色々な演出もできますね。
 

サンプル

See the Pen
animation-play-state
by YugetaKoji (@geta1972)
on CodePen.


 

赤いボールをクリックすると、ボールの動きが止まり、再度クリックすると、動き始めます。
 

動くボールのクリックは少し難しいですが、ゲーム性を感じていただければと思います。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です