手軽なアニメーションとして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を記述*/
}animation値は下記になります⇩
| 値 | 内容 |
|---|---|
| ease | 開始時と終了時にはゆっくり変化。 |
| ease-in | 開始時はゆっくり変化し、終了時は早く変化。 |
| ease-out | 開始時に早く、終了時にゆっくり変化。 |
| ease-in-out | easeよりゆっくり変化。 |
| linear | 速度が変わることなく一定に変化。 |
| 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.
