Mill's Note

【CSS-rules】animation

/

cssだけでサイトに様々な動きをつけられるアニメーション。
一見難しそうですが、シンプルな動きならとっても簡単。組み合わせ次第で表現の幅が広がります^^

animation 一括指定

指定必須のプロパティ、変更したいプロパティ(初期値のままなら記載不要)を指定します。

順番は任意ですが 、遅延させる場合は必ず「[animation-duration(再生時間)]が先[animation-delay(遅延時間)]が後」になるよう記載して下さい。

CSS code
animation: 1-name 2-duration 3-timing 4-delay 5-iteration 6-fill 7-direction 8-play;

animation プロパティ

プロパティ初期値説明
1animation-name指定必須一意の文字列識別名
2animation-duration指定必須s (秒)、ms(ミリ秒)1 回の再生時間
3animation-timing-functionease7種類から選択再生スピードの変化
4animation-delay0s (秒)、ms(ミリ秒)開始までの遅延時間
5animation-iteration-count11, 数値, infinite(無限)繰り返す回数
6animation-fill-modenone4種類から選択終了時の状態
7animation-directionnormal4種類から選択アニメーションの方向
8animation-play-staterunning2種類から選択アニメーションの実行

1- animation-name / 識別名 (必須)

@keyframes と紐づける為に、アニメーションごとに一意の名前 (半角英数字、 ハイフン、アンダーバー可) を付ける必要があります。

animation-name: my-anime;   /* 初期値 '' */

2- animation-duration / 再生時間 (必須)

アニメーション1回の再生時間( @keyframes 0%~100% にかかる時間 ) を、s (秒)、ms(ミリ秒) のどちらかで設定します。

animation-duration: 1s;   /* 初期値 0 */

3- animation-timing-function / 再生スピードの変化

アニメーション1回の再生内で、スピードがどのように変化するか設定します。

animation-timing-function: ease;   /* 初期値 ease */
説明
ease ゆっくり始まり、速度を上げ、終了まで減速 (初期値)
ease-inゆっくり始まり、終了まで加速
ease-out速く始まり、終了まで減速
ease-in-outeaseよりもゆっくり変化する
linear最初から最後まで等しい速度
steps(n, <jumpterm>)n = 回数 / コマ送りのように変化させる
<jumpterm> で変化のタイミングを指定
 <jumpterm> step-start 開始直後に100%、完了までキープ /steps(1,start)と同じ
 <jumpterm> step-end 完了まで0%、完了時に100%    /steps(1,end)と同じ
 <jumpterm> startsteps(n,start) / step-startをn 回に分割
 <jumpterm> endsteps(n,end)   / step-endをn 回に分割
 <jumpterm> jump-both0% 位置と 100% 位置の両方で一時停止
cubic-bezier(p1, p2, p3, p4)変化の度合いをX軸・Y軸で指定
ジェネレーター cubic-bezier.com

4- animation-delay / 開始までの遅延時間

1回目のアニメーションが開始するまでの時間をs (秒)、ms(ミリ秒) のどちらかで設定します。

animation-delay: 2s;   /* 初期値 0 */
  • 一括指定の場合は、必ず animation-duration より後ろ に記載します。
  • 2回目以降は遅延しませんので、複数のアニメーションを重ねる場合はご注意ください。

5- animation-iteration-count / 再生回数

アニメーションを繰り返す回数を指定します。
animation-fill-mode と組み合わせる事で、再生終了後の表示を指定できます。

animation-iteration-count: 1;   /* 初期値 1 */
説明
11回のみ再生 (初期値)
数値再生回数を数値で指定 (1.5等の小数点も可)
infinite無限再生

6- animation-fill-mode / 終了時の状態

アニメーション終了時 (全ての再生が終わった後) の状態を指定します。
animation-iteration-count: infinite; (無限再生) の場合、この指定は無視されます。

animation-fill-mode: none;   /* 初期値 none */
説明
noneアニメーション実行時のみ@keyframes(animation-name)で設定したstyleを適用 (初期値)
forwards終了時の状態を維持
backwards開始時の状態に戻る
both実行前と実行後ともに@keyframes(animation-name)で設定したstyleを適用

7- animation-direction / 再生方向

アニメーションの再生方向を指定します。
alternatealternate-reverse を使う事でバウンドのような動きを表現できます^^

animation-direction: normal;   /* 初期値 normal */
説明
normal通常   / cssで指定した方向 (初期値)
reverse逆方向  / css指定と逆方向
alternate奇数回→通常、偶数回→逆方向
alternate-reverse奇数回→逆方向、偶数回→通常

8- animation-play-state / 実行・停止

開始時にアニメーションが実行中か停止中かを設定します。
JS等で値を書き換える事で、停止 (再生) ボタンでの制御も可能になります。

animation-play-state: running;   /* 初期値 running */
説明
running実行中 (初期値)
paused停止中

animation 記述例

@keyframes は 「from(0%), to(100%)」又は「0%, n%, n%, 100%」で分け、それぞれに対応する「プロパティ:値」を記載します。

from, to で記述
CSS code
.sample {
  animation: anime 3s ease-in 3s alternate infinite;
}
@keyframes anime {
  from {
    background-color: #f00;
  }
  to {
    background-color: #fff;
  }
}
0%, n%, n%, 100% で記述
CSS code
.sample {
  animation: anime 3s ease-in 3s infinite forwards paused;
}
@keyframes anime {
  0%   {
    background-color: #f00;
  }
  50%  {
    background-color: #fff;
  }
  100% {
    background-color: #f00;
  }
}

参考サイト