animationと@keyframes
transitionプロパティと同じくアニメーションの時間などを指定するのが「animetion」。
機能的には停止やループなどより細かい指定も出来る。
でもってその変化を0〜100％区切りで指定出来るのが「@keyframes」。
時間的な指定と変化の指定が分離しているので、視認性が良く比較的理解もしやすいと個人的には感じる。
animationプロパティ
まずはanimationのそれぞれ個別に指定出来るプロパティ。
- animation-name・・・使用する@keyframesの名前（初期値「none」）
- animation-duration・・・アニメーション開始から終了までの所要時間を指定（初期値「0s」）
- animation-timing-function・・・アニメーションのイージングを指定（初期値「ease」）
- animation-delay・・・アニメーションを開始するまでの遅延時間を指定（初期値「0s」）
- animation-iteration-count・・・アニメーションの繰り返し回数を指定（初期値「1」）
- animation-direction・・・アニメーションの再生の向きを指定（初期値「normal」）
- animation-fill-mode・・・アニメーション実行前後のスタイル指定（初期値「none」）
- animation-play-state・・・アニメーションの実行、停止を指定（初期値「running」）
これらをひとまとめで書けるのが「animation」
/*
長ったらしいので以下に置き換えて書いてます。
name -> animation-name値
duration -> animation-duration値
easing -> animation-timing-function値
delay -> animation-delay値
count -> animation-iteration-count値
direction -> animation-direction値
mode -> animation-fill-mode値
state -> animation-play-state値
*/
/* １つのプロパティに指定（スペース区切り） */
animation: name duration easing delay count direction mode state;
/* 複数のプロパティに指定（カンマ区切りにする） */
animation: name duration easing delay count direction mode state, name duration easing delay count direction mode state;ひとまとめでも入れる値は一緒。省略部分は初期値が使われる。
/* Vendor prefixesの例 これらは省略します */
-webkit-animation-fill-mode:backwards;
animation-fill-mode:backwards;
Autoprefixer CSS: Browserslist last 4 version 2021.01
使用する@keyframesの名前 - animation-name
/* 値は@keyframesの名 */
animation-name: 値;
/* 複数指定はカンマ区切り */
animation-name: 値, 値;@keyframesは後半にまとめるけど、名前自体はCSSの作法に則っていれば好きな名前でOK。@keyframesは色や形が変化する工程を表したものなので、どれを使うか指定するのが役目。
アニメーションの時間 - animation-duration
/* 値はsもしくはms（初期値は0ｓ） */
animation-duration: 値;値単位は「s」なら「秒（1sなら１秒）」、「ms」なら「ミリ秒（1msなら1000分の1秒）」を指定。
複数指定する場合カンマ区切りで。
/* 複数指定の例 */
animation-name: name1, name2;
animation-duration: 3s, 1s;イージングの指定 - animation-timing-function
transition-timing-function: 値;値には以下がある。
- ease・・・始めと終わりをゆっくり
- linear・・・均一の速度
- ease-in・・・除々に加速しながら
- ease-out・・・除々に減速しながら
- ease-in-out・・・加速し減速
- cubic-bezier( 値１, 値２, 値３, 値４ )・・・独自のイージングを設定する
- step-start・・・開始時に最終の状態（すぐ開始）
- step-end・・・終了時に最終の状態（１ステップ分待ってから開始）
- steps( ステップ数, 変化する位置 )・・・ステップ数ごとに等間隔で変化
stepsは一定時間内で段階的に変化する。変化する位置は「start」もしくは「end（デフォルト）」。
cubic-bezierのジェネレーターは以下のページ参照。目視出来る上に設定したらコピペで完了出来るGreatなサイト。
遅延時間 - animation-delay
/* 値はsもしくはms（初期値は0ｓ） */
animation-delay: 値;値単位は「s」なら「秒（1sなら１秒）」、「ms」なら「ミリ秒（1msなら1000分の1秒）」を指定。
animation-durationと同じく複数指定する場合カンマ区切りで。
繰り返し回数 - animation-iteration-count
/* 値は正の整数と小数 */
animation-iteration-count: 値;値は「１」で最初から最後まで。「0.5」にすると半分再生。ループさせたい場合は「infinite」。
複数指定する場合カンマ区切りで。
再生の向き - animation-direction
animation-direction: 値;値には以下がある。
- normal・・・通常再生
- reverse・・・逆再生
- alternate・・・通常再生後、逆再生
- alternate-reverse・・・後逆再生後、通常再生
複数指定する場合カンマ区切りで。
実行前後のスタイル - animation-fill-mode
animation-fill-mode: 値;値には以下がある。
- none・・・終了後再生前の状態に戻る（適用されない）
- forwards・・・再生終了後の状態をキープ
- backwards・・・再生時、終了後の状態で再生
- both・・・再生時、終了後の状態で再生し、再生終了後の状態をキープ
複数指定する場合カンマ区切りで。forwards以外ややっこしい・・・
実行、停止 - animation-play-state
animation-play-state: 値;値には以下がある。
- running・・・アニメーションの実行
- paused・・・アニメーションの停止
複数指定する場合カンマ区切りで。
@keyframes規則
規則って言うらしい。始まりから終わりまで段階ごとに変化を指定する。文書にするより見る方が早い。
/* 最初と最後のみ */
@keyframes 任意の名前 {
from { CSSプロパティ:値; }
to { CSSプロパティ:値; }
}
/* パーセントで細かく指定 */
@keyframes 任意の名前 {
0% { CSSプロパティ:値; }
50% { CSSプロパティ:値; }
100% { CSSプロパティ:値; }
}「from」は0％。「to」は100％。以下の例はフェードイン。
/* @keyframes名はfadeEelem */
/* vendor prefixes使用時の例 */
@-webkit-keyframes fadeEelem {
0% { opacity:0; }
100% { opacity:1; }
}
@keyframes fadeEelem {
0% { opacity:0; }
100% { opacity:1; }
}
Autoprefixer CSS: Browserslist last 4 version 2021.01
animationと合わせて使ってみる
前出のfadeinを使ったコード。１秒かけてフェードインする。
/* セレクタ名はclass「fade」 */
.fade { animation: fadeEelem 1ｓ ease; }
@keyframes fadeEelem {
0% { opacity:0; }
100% { opacity:1; }
}
ベンダープリフィクス分コードは長くなってしまうが、ちょっと凝ったものはtransitionで行うより断然わかりやすい。（と思う）
