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機能の停止と再生を定義することができる機能で、今回やろうとしている事のドンピシャ機能でした。/* pause */
.motion-element{
animation-play-state: paused;
}
/* play */
.motion-element{
animation-play-state: running;
}
使い方も非常に簡単で、アニメーションを止めたいエレメントに上記の設定をするだけです。
アニメーションをさせたくないエレメントに事前にセットしてもいいし、動作中にクリックなどのイベントと組み合わせて切り替えると色々な演出もできますね。
サンプル
See the Pen animation-play-state by YugetaKoji (@geta1972) on CodePen.
赤いボールをクリックすると、ボールの動きが止まり、再度クリックすると、動き始めます。 動くボールのクリックは少し難しいですが、ゲーム性を感じていただければと思います。
0 件のコメント:
コメントを投稿