cssだけでサイトに様々な動きをつけられるアニメーション。
一見難しそうですが、シンプルな動きならとっても簡単。組み合わせ次第で表現の幅が広がります^^
animation 一括指定
指定必須のプロパティ、変更したいプロパティ(初期値のままなら記載不要)を指定します。
順番は任意ですが 、遅延させる場合は必ず「[animation-duration(再生時間)]が先、[animation-delay(遅延時間)]が後」になるよう記載して下さい。
animation: 1-name 2-duration 3-timing 4-delay 5-iteration 6-fill 7-direction 8-play;animation プロパティ
| – | プロパティ | 初期値 | 値 | 説明 |
|---|---|---|---|---|
| 1 | animation-name | 指定必須 | 一意の文字列 | 識別名 |
| 2 | animation-duration | 指定必須 | s (秒)、ms(ミリ秒) | 1 回の再生時間 |
| 3 | animation-timing-function | ease | 7種類から選択 | 再生スピードの変化 |
| 4 | animation-delay | 0 | s (秒)、ms(ミリ秒) | 開始までの遅延時間 |
| 5 | animation-iteration-count | 1 | 1, 数値, infinite(無限) | 繰り返す回数 |
| 6 | animation-fill-mode | none | 4種類から選択 | 終了時の状態 |
| 7 | animation-direction | normal | 4種類から選択 | アニメーションの方向 |
| 8 | animation-play-state | running | 2種類から選択 | アニメーションの実行 |
1- animation-name / 識別名 (必須)
@keyframes と紐づける為に、アニメーションごとに一意の名前 (半角英数字、 ハイフン、アンダーバー可) を付ける必要があります。
animation-name: my-anime; /* 初期値 '' */2- animation-duration / 再生時間 (必須)
アニメーション１回の再生時間( @keyframes 0%～100% にかかる時間 ) を、s (秒)、ms(ミリ秒) のどちらかで設定します。
animation-duration: 1s; /* 初期値 0 */3- animation-timing-function / 再生スピードの変化
アニメーション１回の再生内で、スピードがどのように変化するか設定します。
animation-timing-function: ease; /* 初期値 ease */| 値 | 説明 |
|---|---|
ease | ゆっくり始まり、速度を上げ、終了まで減速 (初期値) |
ease-in | ゆっくり始まり、終了まで加速 |
ease-out | 速く始まり、終了まで減速 |
ease-in-out | easeよりもゆっくり変化する |
linear | 最初から最後まで等しい速度 |
steps(n, <jumpterm>) | n = 回数 / コマ送りのように変化させる<jumpterm> で変化のタイミングを指定 |
<jumpterm> step-start | 開始直後に100%、完了までキープ /steps(1,start)と同じ |
<jumpterm> step-end | 完了まで0%、完了時に100% /steps(1,end)と同じ |
<jumpterm> start | steps(n,start) / step-startをn 回に分割 |
<jumpterm> end | steps(n,end) / step-endをn 回に分割 |
<jumpterm> jump-both | 0% 位置と 100% 位置の両方で一時停止 |
cubic-bezier(p1, p2, p3, p4) | 変化の度合いをX軸・Y軸で指定 ジェネレーター cubic-bezier.com |
4- animation-delay / 開始までの遅延時間
１回目のアニメーションが開始するまでの時間をs (秒)、ms(ミリ秒) のどちらかで設定します。
animation-delay: 2s; /* 初期値 0 */- 一括指定の場合は、必ず
animation-durationより後ろ に記載します。 - 2回目以降は遅延しませんので、複数のアニメーションを重ねる場合はご注意ください。
5- animation-iteration-count / 再生回数
アニメーションを繰り返す回数を指定します。animation-fill-mode と組み合わせる事で、再生終了後の表示を指定できます。
animation-iteration-count: 1; /* 初期値 1 */| 値 | 説明 |
|---|---|
1 | 1回のみ再生 (初期値) |
数値 | 再生回数を数値で指定 (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 / 再生方向
アニメーションの再生方向を指定します。alternate や alternate-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%」で分け、それぞれに対応する「プロパティ:値」を記載します。
.sample {
animation: anime 3s ease-in 3s alternate infinite;
}
@keyframes anime {
from {
background-color: #f00;
}
to {
background-color: #fff;
}
}.sample {
animation: anime 3s ease-in 3s infinite forwards paused;
}
@keyframes anime {
0% {
background-color: #f00;
}
50% {
background-color: #fff;
}
100% {
background-color: #f00;
}
}