【面倒くさい人向け】@keyframesアニメーションのこれ覚

自分の中ではつい先日まで、Webサイトでアニメーションを実装するには、

・単一で簡単なアニメーションはCSS transition
・連続した複雑なアニメーションはJavaScript

だったんですが、
アニメーションの管理がCSSとJavaScriptの２つに別れているのが気持ち悪く思えてきたのと、
今更ながらCSSの＠keyframesアニメーションの良さを理解できたんで、
これさえ覚えておけば＠keyframesアニメーションが使えるようになりますよーというまとめ。


##＠keyframesはややこしい？むずかしい？
＠keyframesアニメーションは直感的にわかりずらい！
そんなふうに考えていた時期が俺にもありました。

例えばこのコードとか

```css:css
div {
  opacity: 0;
  width: 50px;
  height: 50px;
  background: #000;
  animation-name: anime01;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes anime01 {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  25% {
    background: #000;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    background: #f00;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    background: #f00;
    transform: scale(1.4);
  }
}

```
<p data-height="265" data-theme-id="0" data-slug-hash="gZMNqN" data-default-tab="result" data-user="kiti-net" data-pen-title="gZMNqN" class="codepen">See the Pen <a href="https://codepen.io/kiti-net/pen/gZMNqN/">gZMNqN</a> by kiti-net (<a href="https://codepen.io/kiti-net">@kiti-net</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

「えーと、アニメーションの継続時間が2秒で、それの25%は0.5秒でtranslateYが0になって…50%は1秒だから……ややこしい！」
「設定するプロパティー多っ！」
「＠keyframe使えん！」

となってる気の短い人は、そもそもの＠keyframesの触れ方が悪かったんだと思います。

そんな人でも基本的に下記の3つのポイントさえ抑えておけば、
＠keyframesを簡単に扱えるようなります。

##１．アニメーションを小さく分解する
上記のアニメーションを細かく見ていくと、6つのアニメーションに分解できます。
このときanimation-nameに分かりやすい名前を付けておくこと。

```css:css
@keyframes opacity_0-1 {
    0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes opacity_1-0 {
    0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes translateY_0-50 {
    0% { transform: translateY(0); }
  100% { transform: translateY(50px); }
}

@keyframes translateY_50-0 {
    0% { transform: translateY(50px); }
  100% { transform: translateY(0); }
}

@keyframes bg_black-red {
    0% { background: #000; }
  100% { background: #f00; }
}

@keyframes scale_1-14 {
    0% { transform: scale(1); }
  100% { transform: scale(1.4); }
}

```

##２．覚えておくプロパティーは5つ
プロパティーは基本的にショートハンドを用いて、下記の形で覚えておけばOK。
またカンマ区切りでアニメーションを複数指定できることも忘れずに。

```css:css
div {
  animation:
    anime01 2s ease 0s forwards,
    anime02 2s ease-out 1s forwards;
}
// name, duration, timing-function, delay, fill-mode
```

name: @keyframesで付けた名前
例） `opacity_0-1`

duration: アニメーションの継続時間
`0.5s` = 0.5秒
`1s`  = 1秒

timing-function: イージング
`ease` `linear` `ease-in` `ease-out` `cubic-bezier()` の中から選択

delay: アニメーションの開始を遅らせる時間
`0.5s`  = 0.5秒
`1s`  = 1秒

fill-mode: アニメーションの実行の前後にどう対象にスタイルを適用するかを設定
基本的に `forwards` （アニメーション後のスタイルを保持する）でOK


##３．分解した＠keyframesを組み立てていく
durationとdelayの値を調整しながら、連続したアニメーションを組み立てていく。
イージングなども個別に設定しやすい。

```css:css
div {
  animation:
    translateY_0-50 0s ease 0s forwards,
    opacity_0-1 0.5s ease 0s forwards,
    translateY_50-0 0.5s ease 0s forwards,
    bg_black-red  0.5s ease 0.5s forwards,
    opacity_1-0  1s ease-out 1s forwards,
    scale_1-14  1s ease-out 1s forwards;
}
```
<p data-height="265" data-theme-id="0" data-slug-hash="roMBXx" data-default-tab="result" data-user="kiti-net" data-pen-title="roMBXx" class="codepen">See the Pen <a href="https://codepen.io/kiti-net/pen/roMBXx/">roMBXx</a> by kiti-net (<a href="https://codepen.io/kiti-net">@kiti-net</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


##注意
同じプロパティのアニメーションを同時に指定すると、後から実行した値に上書きされてしまうので注意。
scale と translate などの transform を同時に行いたい場合は、専用の＠keyframesを用意すること。

```css:css
// NG
div {
  animation:
    translateY_50-0 1s ease 0s forwards,
    scale_1-14  1s ease 0s forwards;
}

// OK
div {
  animation: scale_1-14_translateY_50-0 1s ease-out 0s forwards;
}

@keyframes scale_1-14_translateY_50-0 {
  0% {
    transform: scale(1) translateY(50);
  }
  100% {
    transform: scale(1.4) translateY(0);
  }
}
```

##まとめ

複雑なアニメーションを作る際は、
0%〜100%の小さなkeyframesをたくさん作って組み立てていくことで、
直感的にアニメーション制作がおこなえるようになります。

覚えることもことも少ないので、
これから＠keyframesを覚えようという人、＠keyframesめんどくさいと挫折した人もぜひぜひ。

Webサイトでアニメーションを実装するには、
・単一で簡単なアニメーションはCSS transition
・連続した複雑なアニメーションはCSS ＠keyframes


アニメーション発火の制御に関しては、また別のお話。