アニメーションの指定方法
アニメーションの基本設定は、animation-nameに付けた名前に対し、keyframesで動きの変化を指定する。また、アニメーションの繰り返しや、変化する時間の調整などの設定も追加できる。
.fadeIn{
animation-name: fadeInAnime;
animation-fill-mode: backwards;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease;
animation-delay: .5s;
animation-direction: normal;
}
/* アニメーションの開始から終了までの変化を指定 */
@keyframes fadeInAnime{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}アニメーションはanimationという名前でまとめて指定できる。
animation: bgchange 20s ease 0s infinite normal;
/* （左から）1.定義名 2.変化時間 3.進行具合 4.何秒目から開始するか 5.ループ */
/* 6.アニメーション再生の向きを順方向、逆方向、前後反転のいずれかにするか */アニメーションの種類を2つ以上組み合わせる時は、カンマ指定で増やしていく。
animation: bgchange01 20s ease infinite,bgchange02 3s ease-in-out;アニメーションの定義名（animation-name）
アニメーションの定義名は半角英数字で自由に決めることが可能。
animation-nameに付けた名前に対し、keyframesでアニメーションの開始から終了までの変化を指定する。
animation-name: fadeInAnime;@keyframes fadeInAnime{
0%{
/* ここに開始のCSSを記述 */
}
60%{
/* 開始から60%の時点のCSSを記述 */
}
100%{
/* ここに終了のCSSを記述 */
}
}
@keyframes fadeInAnime{
from{
/* ここに開始のCSSを記述 */
}
to{
/* ここに終了のCSSを記述 */
}
}※0%～100%の間には20%、60%といった間の動きの設定の追加も可能。
※0%～100%はfromとtoでも代用可能。
アニメーションの開始と終了時の状態を指定（animation-fill-mode）
animation-fill-mode: backwards;- none：指定なし。初期値
- forwards：元の状態に戻らずアニメーション最後の状態を維持
- backwards：アニメーションの最初の状態に戻る
- both：backwardsとforwardsの両方の状態を適用
アニメーション1回分の時間の長さを指定（animation-duration）
animation-duration: 3s;1.5秒なら→1.5s（初期値は0）
動きをループさせる（animation-iteration-count）
animation-iteration-count: infinite;- infinite：無限に再生を繰り返す
- 数値：数値で再生回数を指定する（初期値は1）
アニメーションの進行具合を操作（animation-timing-function）
animation-timing-function: ease;- ease：初期値。開始時と終了時が緩やかに変化
- ease-in：開始時は緩やかに変化、終了に近づくと早く変化
- ease-out：開始時は早く変化し、終了時は緩やかに変化
- ease-in-out：開始時と終了時は、かなり緩やかに変化
- linear：開始から終了まで一定に変化
- steps(数値, start または end)：パラパラ漫画のように数値をコマ数で変化
- cubic-bezier(数値をカンマ区切りで4つ指定)：変化の進行具合を3次ベジェ曲線で指定
アニメーションの開始を遅らせる（animation-delay）
animation-delay: .5s;3秒なら→3s（初期値は0）
アニメーション再生の向きを順方向、逆方向、前後反転のいずれにするかを決める（animation-direction）
animation-direction: normal;- normal：初期値。普通方向の再生で動きを繰り返す
- reverse：逆方向の再生で動きを繰り返す
- alternate：奇数回では普通方向、偶数回では逆方向の再生で動きを繰り返す
- alternate-reverse：毎回逆方向の再生、奇数回では逆方向、偶数回では普通方向
