① animation(アニメーション)プロパティと@keyframes(キーフレーム)だけでアニメーション(動きや変化)をつけることができる。(JavaScriptを使わなくても動く。べ、べつに苦手とか言ってないし！)
② 簡単なわりに大抵の動きを設定できる。
③ 使いまわしが可能。フェードインなど一つ作っておけば何度も使える。お得感。
④ 【番外】動画編集ソフトなどでも同じ用語が多いので理解が早くなる。必要ないかもだけど。
当然だが複雑なアニメーションはすこぶるコードが長くなる。
★キーフレームと紐づけるための名前
① キーフレームを使うために必要
(キーフレームに同じ名前を定めることでプロパティが適用)
② 誤って同じ名前を使ってしまうとCSS後述のキーフレームが適用される。(CSSは上から順に読み込まれるので同じ名前は上書きされる)
★1回のアニメーションに要する時間の長さ
① 開始から終了までの時間
② 秒/s ミリ秒/ms で設定。ちなみに0.5sで(0.5秒／5ms)
★アニメーションが変化する速度
① ease 開始と終了を滑らかに。
② linear 一定速度
③ ease-in 開始ゆっくり。
④ ease-out 終了ゆっくり。
⑤ ease-in-out 開始と終了をゆっくり。
⑥ cubic-bezier(p1, p2, p3, p4) 二次元ベジェ曲線で定義
⑦ steps(n, ＜jumpterm＞)停止回数を等間隔で設定。
ｎに停止回数を入力。＜jumpterm＞は等間隔の始まり(0％)か終わり(100％)かを設定(以降入力)
jump-start(0％に最初のｼﾞｬﾝﾌﾟ)、jump-end(100％に最後のｼﾞｬﾝﾌﾟ)、jump-none(0％と100％で1/n間隔を保持)、jump-both(0％と100％で一時停止)
〈次ページに構文〉
/* キーワード値 */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;
/* 関数値 */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
/* 段階関数のキーワード */
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);
/* 複数のアニメーション */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
/* グローバル値 */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;
★アニメーション開始の遅延
例えばホバーしてから0.5秒後にアニメーションを開始したい時などに設定
★アニメーションが繰り返される回数
① 既定値は 1。2回再生したいなら 2。
② infiniteと入力で無限ループ
★アニメーション再生の向きを順方向、逆方向、前後反転のいずれにするかを設定
normal | reverse | alternate | alternate-reverse
★アニメーション実行の前後にどう対象にスタイルを適用するかを設定
・ 例えば右から左に移動するアニメーションがあった場合、アニメーションの終了とともに対象は元の位置へと戻るが、これを移動したままにできる。（forwards）
none | forwards | backwards | both
