手軽なアニメーションとしてWeb上でマウスを乗せた場合の:hoverアニメーションをつける場合はCSSプロパティtransitionを使って変化させます。
そして、高度なアニメーションを実装したい場合はanimationプロパティと@keyframeを組み合わせてCSSアニメーションを作ります。
まずは基本的なtransitionについての解説をしてから、応用編としてanimationプロパティと@keyframeを組み合わせたCSSアニメーションについて詳しく解説します。
transitionについて
transition要素はスタイルが変化する速度を調整するプロパティです。transitionでは@keyframesの設定は必要なくtransitionで自然な動きが実現できます。
transitionプロパティはトリガーが必要
transitionプロパティは:hoverや:activeなど、要素が変化するためのトリガーが必要となります。元の要素にtransitionを付けることによって:hoverや:activeをきっかけにして機能することになります。
▪参考例⇩ Run Penをクリック。
See the Pen transitionとtransform使用例 by pull-design (@design90806871) on CodePen.
boxにマウスが乗った際にtransition: 1s;の記述で1秒かけてゆっくり変化させるという意味になります。
transform: scale(0.8);で縮小、transform: scale(1.1);で拡大が自然と動くのがわかります。
簡易的に記述しましたが、細かく設定する場合は下記のようになります。
.box {
transition-property: 対象プロパティ;
transition-duration: 変化の継続時間;
transition-timing-function: アニメーション効果;
transition-delay: 遅れて始まる時間;
}
/* ショートハンド */
.box {
transition: 対象プロパティ 変化の継続時間 遅れて始まる時間 アニメーション効果;
}
プロパティは下記になります⇩
transition-property | 設定することで、プロパティに動きがつくようになります。複数個設定が可能で”all”を設定すると、全てのプロパティに動きがつきます。 |
transition-duration | 「動き」の継続時間を設定します。開始から終わりまで何秒かけるかを秒単位(s)かミリ秒単位(ms)で指定します。 |
transition-timing-function | 動きの速度の変化を設定できます。初期値は”ease”で以外は”linear”(一定速度の変化)、”ease-in”(最初ゆっくり、後にはやく変化)、”ease-out”(最初は速く、後にゆっくり変化)などがあります。 |
transition-delay | 設定することで遅れて動きが始まります。動きが始まるまでの時間を設定します。これも秒単位(s)かミリ秒単位(ms)で指定します。 |
animationと@keyframesについて
animationはtransitionを連続して行う動作に使用します。
@keyframesにabout-colorの名前を付けて、同じ名前をanimationの先頭に付けて定義します。
▪参考例⇩ Run Penをクリック。
See the Pen animationと@keyframes by pull-design (@design90806871) on CodePen.
infiniteを指定すると無限にアニメーションをループさせることができます。
.box {
/*8秒かけて"infinite"で無限にループさせる*/
/*"about-color"という名前のアニメーションを定義*/
animation: about-color 8s ease-in-out infinite;
}
@keyframes about-color {
0% {background-color: #ff2828;} /*アニメーションを開始するときのCSSを記述*/
100% {background-color: #9328ff;} /*アニメーションを終了するときのCSSを記述*/
}
コードは、CSSのアニメーションを使用して要素の背景色を変化させる効果を実現しています。以下にコードの意味を説明します。
.box クラス | 要素に対してスタイルを適用するためのクラスです。 |
animation プロパティ | アニメーションの設定を行います。 about-color はアニメーションの名前です。 8s はアニメーションが8秒かけて実行されることを指定しています。 ease-in-out はアニメーションのタイミング関数を指定しています。この場合は、開始と終了の速度がゆっくりとなります。 infinite はアニメーションを無限に繰り返すことを指定しています。 |
@keyframes ルール | アニメーションのキーフレームを定義します。 about-color はキーフレームの名前で、アニメーションの名前と一致しています。 0% はアニメーションの開始時のスタイルを定義しています。この場合、背景色は #ff2828(赤色)です。 100% はアニメーションの終了時のスタイルを定義しています。この場合、背景色は #9328ff(紫色)です。 |
このコードを実行すると、.box クラスが指定された要素の背景色がアニメーションによって変化します。アニメーションは8秒かけて開始の背景色から終了の背景色へと徐々に変化し、その後無限に繰り返されます。
animation値は下記になります⇩
ease | 開始時と終了時にはゆっくり変化。 |
ease-in | 開始時はゆっくり変化し、終了時は早く変化。 |
ease-out | 開始時に早く、終了時にゆっくり変化。 |
ease-in-out | easeよりゆっくり変化。 |
linear | 速度が変わることなく一定に変化。 |
infinite | 無限に繰り返す。 |
cubic-bezier | 変化の度合いをベジェ曲線により任意で指定。 (x軸の値・ y軸の値・ x軸の値・ y軸の値) |
無限scrdownの実装
transform:translate()・・・要素の表示位置を移動させるプロパティ。
translate (X方向の距離, Y方向の距離) | X方向とY方向の距離で2D移動を指定します。 Y方向の距離は省略することができY方向の距離は0となります。 |
translateX (X方向の距離) | X方向の距離で移動を指定します。 |
translateY (Y方向の距離) | Y方向の距離で移動を指定します。 |
translateZ (Z方向の距離) | Z方向の距離で移動を指定します。 translateZ()関数にはパーセンテージ値を指定することができません。 |
See the Pen scrdown by pull-design (@design90806871) on CodePen.