CSSアニメーションで雪だるまとツリーを作ろう⛄🎄


#はじめに
この記事は、 CAMエンジニア Advent Calendar 2019 6日目の記事です。

記事一覧はこちらから↓
https://qiita.com/advent-calendar/2019/cam-inc

昨日は```id:youkouJB``` さんの 「入社してCSS記述で指摘されたこと」 でした。
CSSの記述方法について気になる方は是非読んでみてください！とてもためになりました！！

ここからは```id:tomomi_h```がCSSアニメーションについて書いていきたいと思います。


#アニメーションてなに？
そもそもcssアニメーションにはCSS TransitionとCSS Animationの２つの機能がある。
###CSS Transition
アニメーションが始まって終わるまでの時間を設定するプロパティ。
###CSS Animation
キーフレームアニメーションのプロパティとその変化を指定して、アニメーションの名前を設定します。
0〜100％までの値で、時間経過を元に変化する。
@Keyframeとanimationはセットで使うプロパティ。

今回は、CSS Animationを使って簡単なアニメーションを試してみます〜。

#作るもの
12月といえばクリスマス:santa_tone1:
今回はクリスマスにちなんで「雪だるま」と「ツリー」を作ってCSS Animationを学びます。


#keyframesとanimationのプロパティについて
###keyframesの使い方
@keyframes の後の名前は任意で決める。
アニメーションの開始と終了を0%(/from) から100%(/to)で指定する。

```css

@keyframes 自分で決めた名前 {
   0% {
     CSSプロパティ:値;
   }
   50% {
     CSSプロパティ:値;
   }
   100% {
     CSSプロパティ:値;
   }
}
```
たとえば、回転させたかったら

```css

@keyframes rotation {
  0% {
    background: red;
  }
  100% {
    transform: rotate(90deg);
    background: blue;
  }
}
```
これに、例えば

```
animation: rotation　1s ease-out infinite;
```
を加えると、
![09c16c5fdf29c1be1ab6ab94fb0f461d.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418681/c9640c6b-35fd-3356-55f4-75b8d2d7a315.gif)
このように、0%の時は色がredのまま、100%のときに90°回転して色が青になる。


###animationプロパティについて
animationプロパティには以下の９つがある。

①animation-name　アニメーションを適用する要素を指定する
②animation-duration　アニメーションが完了するまでの時間を指定する
③animation-timing-function　アニメーションの進行度を指定する
④animation-delay　アニメーションが開始するまでの時間を指定する
⑤animation-iteration-count　アニメーションの実行回数を指定する
⑥animation-direction　アニメーションの再生方向を指定する
⑦animation-fill-mode　アニメーションの再生中・再生後のスタイルを指定する
⑧animation-play-state　アニメーションの再生、または一時停止を指定する
⑨animation　上記8つのプロパティを1つでかけるショートハンドプロパティ
#animation-name
animation-nameには@keyframesの名前を書く。

```css

@keyframes rotation {
  0% {
    background: red;
  }
  100% {
    transform: rotate(90deg);
    background: blue;
  }
}

.クラス名 {
 animation-name: rotation;
}
```



#animation-duration
animation-durationは、アニメーションの開始から終了までの時間を指定できる。

```css

@keyframes rotation {
  0% {
    background: red;
  }
  100% {
    transform: rotate(90deg);
    background: blue;
  }
}

.クラス名 {
 animation-name: rotation;
 animation-duration: 5s;
}
```
これなら90度回転するのに5秒かかる。
![b675ea27e199b56fd88c428f48d47aa0.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418681/80c97b29-781f-5bce-e535-672d2d85ef74.gif)

#animation-timing-function
###アニメーションが変化する速度を指定できる。
①　ease 初期値。開始時と終了時は緩やかに変化する。
②　ease-in　開始時は緩やかに変化、終了に近づくと早く変化する。
③　ease-out　開始時は早く変化し、終了時は緩やかに変化する。
④　ease-in-out 開始時と終了時は、かなり緩やかに変化する。
⑤　linear　開始から終了まで一定に変化する。
⑥　step-start 開始時に最終の状態になる。
⑦　step-end　 終了時に最終の状態になる。
⑧　steps(正数, start または end) 
　　指定した正数の段階で変化する。第2引数には start または end を指定。
　　startを指定すると、アニメーション開始時から変化。endを指定すると、アニメーション終了時に変化。


違いがよくわからないから、サンタさんとトナカイを走らせて比べてみた。
![e9cdd679488e495b36634cd7ae0b7444.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418681/e560ae41-6e1e-5902-2d93-b1787b956f1e.gif)

なるほど〜〜！

#animation-delay
アニメーションが始まるまでの時間を指定できる。

```css

@keyframes rotation {
  0% {
    background: red;
  }
  100% {
    transform: rotate(90deg);
    background: blue;
  }
}

.クラス名 {
 animation-name: rotation;
 animation-delay: 3s;
}
```

3秒経ってから始まる。
![2194f59a1c4047829c9d20ce2252b14b (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418681/67a01770-2bbb-5879-c532-98c1b65e68c0.gif)

#animation-iteration-count
アニメーションの繰り返しの回数を指定できる。

```css

@keyframes rotation {
  0% {
    background: red;
  }
  100% {
    transform: rotate(90deg);
    background: blue;
  }
}

.クラス名 {
 animation-name: rotation;
 animation-delay: 2s;
 animation-iteration-count: 2;
}
```

２秒経ってから始まって、2回で終わる。
![cb92faf664f339fcec283ce4b3afe593.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418681/ee5fbb4d-2d83-0d9c-5437-985cc31962b6.gif)

#animation-direction
アニメーションの方向を指定できる。
①nomal アニメーションを毎回順方向に再生。
②reverse アニメーションを毎回逆方向に再生。
③alternate　アニメーションを毎回反転させる。初回が順方向。
④alternate-reverse　アニメーションを毎回反転させる。初回が逆方向。

またまた、サンタさんとトナカイを走らせて比べてみた。

```css

.santa {
  animation-name: santa;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-direction: ここにanimation-direction;
}

@keyframes santa {
  0% { left: 500px; }

  100% { left: 0; }
}
```
![a750ef5fd0839d1ffa21dbe04667ee46.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418681/87e188f7-ae93-7a88-45fc-0a2e027d7816.gif)




#animation-fill-mode
アニメーション再生中、再生後のstyleを指定できる。
①none
スタイルを指定しない。アニメーション終了後はもとのスタイルが適用される。
animation-delayを指定している場合は、アニメーションが開始するまでは、もとのスタイルが適用される。
②backwards
アニメーション終了後は0%のスタイルが適用される。
animation-delayを指定している場合は、アニメーションが開始するまでは、0%のスタイルが適用される。
③forwards
アニメーション終了後は100%のスタイルが適用される。
animation-delayを指定している場合は、アニメーションが開始するまでは、もとののスタイルが適用される。
④both
アニメーション終了後は100%のスタイルが適用される。
animation-delayを指定している場合は、アニメーションが開始するまでは、0%のスタイルが適用される。

```css

.squear {
  background-color: red;
  animation-name: rotation;
  animation-duration: 5s;
  animation-timing-function: ease-out;
  animation-fill-mode: ○ ○ ○;
}

@keyframes rotation {
  0% {
    background: blue;
  }
  50% {
    transform: rotate(90deg);
    background: yellow;
  }

  100% {
    transform: rotate(90deg);
    background: green;
  }
}
```

![5b7db6e943b906135929aee66c3a2f35.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418681/23329e5f-e285-879a-ef4c-a311eab1ec78.gif)


#animation-play-state
アニメーションが実行中か停止中かを指定できる。
①running アニメーションを再生させる。
②paused アニメーションを停止させる。

```css

.text {
  animation-name: color;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-play-state: running;
}

@keyframes color {
  0% {
    color: red;
  }
  100% {
    color: green;
  }
}
```
![ed00a73a7d0e30431beea5a652114129 (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418681/7f6972c4-2865-2ac8-c653-7870f1e4660e.gif)
初期値runningで、ボタンを押したら止まる→動く→止まる

###animation

１行にまとめられる。
例）

```
transition :  3s linear 0 infinite alternate;
```


#この機能を使って、雪だるまとツリーを動かしてみる⛄🎄
###雪だるまをゆらゆらさせる⛄

```css
.snowman {
  animation: swing 1s 1s ease-in-out infinite alternate;
}
@keyframes swing {
  0%,100% { 
    transform-origin: bottom center; 
  }
  50% {
    transform: rotate(-2deg);
  }
}
```

原点をbottom centerにして,1秒かけてswingさせる。

![7cbd22a269c4f27cb265a03e300aaf66.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418681/238615e5-9017-6437-523f-7d2250cb2786.gif)


###クリスマスツリーをキラキラさせる🎄✨

```css

.reflect {
  animation: reflect 2s linear infinite;
}

@keyframes reflect {
  0% { opacity: 0.2; }
  50% { opacity: 0.8; }
  80% { opacity: 0.2; }
}
```

ひとつひとつに色を付けて、2秒間のopacityを指定する。
![20c41cab06f3928ab49ce67306e10fb6.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418681/845e1461-cbcf-7c39-6c6c-7135d6bb2cd3.gif)

雪だるま⛄とクリスマスツリー🎄を使って、冬景色ぽくしてみた:snowflake:↓

###🎁　Merry Christmas　🎁


<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="tomomi0425" data-slug-hash="ExaYbQE" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="ExaYbQE">
  <span>See the Pen <a href="https://codepen.io/tomomi0425/pen/ExaYbQE">
  ExaYbQE</a> by ともみ (<a href="https://codepen.io/tomomi0425">@tomomi0425</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

さて、明日は```id:ruman```さんの「JSのつまづいたところ」です。
お楽しみに！