大前提: @keyframesとは
アニメーション開始から終了するまでどのような動きのアニメーションをするのかを指定できるCSSの文法。
animation プロパティと @keyframesを使うと、CSSだけでアニメーションの設定ができる。
基本文法
nantoka.css
@keyframes任意のアニメーションの名前(なくてもok){0%{CSSプロパティ:値;}100%{CSSプロパティ:値;}}0%=アニメーションの始まり、100%=アニメーションの終わりを表している。0%=from 100%=toで置き換え可能。
例えば、<div class="box"></div>
というHTMLの要素があり、boxに対してfadeInと名付けた
アニメーションの時間を指定したい時はanimationプロパティを使う！
プロパティ一覧
| プロパティ | 説明 | 初期値 |
|---|---|---|
| animation-name | アニメーションの名前 | 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 | 記のプロパティを一括で指定できるショートハンド | 上記のそれぞれの初期値と同じ |
一括指定の順番としては、以下で覚える。
animation: ①-name ②-duration ③-timing ④-delay ⑤-iteration ⑥-direction ⑦-fill ⑧-play;
transitionとの違いは？
| transition | animation | |
|---|---|---|
| 動きの指定 | 始めと終わりのみ指定可 | 段階を細かく指定可能 |
| アニメーション開始のきっかけ | マウスホバーなど開始のきっかけが必要 | 開始のきっかけは不要 |
transitionは例えばクリックされたら:hoverでちょっと色を薄くしてみる〜とか。何かしらのきっかけが必要。
animationはローディング画面で0.5秒までは文字がフェードインしてくるだけで、0.8秒になったらその文字が回転する〜とかの秒数毎の細かい設定ができる。
参考記事
これとかわかりやすかった↓