CSSでアニメーションさせる話。その２
清木です。
よろしくお願いします。
今回は、予告通りにCSSアニメーションの記法について書いていきたいと思います。
まずは、下のサンプルをご覧ください。
See the Pen KYWpaZ by Suno (@j1tsufan) on CodePen.
それぞれ、CSS AnimationとTransitionで要素にカーソルがホバーした場合を条件とし、margin-leftの値を増加させ要素を右にスライドさせる処理を記述しています。
動が少し違いますが、これはCSS AnimationとTransitionで、できることが異なるためです。
それぞれの記法の違いについて。
それぞれの記法について説明していきます。
- CSS Animation
- @keyframes <animation-name>でアニメーションを定義。
- :hoverで実行するアニメーションを指定。
- :hoverで実行するアニメーションの開始から終了までの時間を指定。
- Transition
- :hoverで変更後のスタイルを指定
- :hoverでtransition句を使用してアニメーションさせる要素と変化にかかる秒数を指定する。
CSS Animationは、@keyframes句にてアニメーションを定義した後、適用する要素からアニメーションを指定することによって、アニメーションを適用します。
また、Transitionでは、適用する要素に直接要素がどのように変化するかを定義します。
詳しい仕様などはW3Cにて仕様書が公開されているのでそちらをご確認ください。
仕様とか詳しいことはいいからどういうことがどう書けるのかを知りたければ下のリンクを一通り読めばつかえるようになるとおもいます。
https://www.w3schools.com/css/css3_animations.asp
CSS Animationでは、アニメーションと、要素に対するスタイルを分けて定義することができるため、他の要素でも再利用が可能になります。
一方、Transitionでは、変更後の要素に対して直接スタイルを指定し、変更前のスタイルから変更後のこのスタイルに何秒かけて変化をするか定義するため、再利用という観点では弱いと感じます。
また、Transitionでは変化をCSS Animationでは動きを定義してます。
そもそも”transition”が変化とか遷移という意味なのでアニメーションとは、性質として違う気もします。
Transitionでは、行なった変化・遷移が終了すると元の状態に戻ろうとするので、
CSS Animationを使った方が思った通りの動きが作れて副作用が少なく済むのではないでしょうか？
使い所を見極めてお好みの方法をご使用ください
僕はCSS Animationの方が好きです。
次回は、 なにを書こうかな未定です。
4
