@keyframesって何

#大前提: @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秒になったらその文字が回転する〜とかの秒数毎の細かい設定ができる。

#参考記事
https://qiita.com/7968/items/1d999354e00db53bcbd8

これとかわかりやすかった↓