CSSアニメーション まとめ

# はじめに
最近CSSアニメーションを勉強し始めました。
「JavaScript使ってないのに動く、すげー！」っと思ったのでまとめました。

# CSSアニメーションとは
TransitionとAnimationという機能を使用し、アニメーションを実装することです。

## Transitionとは
直訳すると「遷移（移り変わり）」という意味です。
一定時間でプロパティを変化させる機能です。
主に、単純な動きのアニメーションを実装する際に利用します。

## Animationとは
キーフレームアニメーションを適用できる機能です。
主に、細かい動きのアニメーションを実装する際に利用します。

### キーフレームアニメーションとは
アニメーションの開始から終了までの経過地点にプロパティを指定できるアニメーションのことです。

## CSSアニメーションを使うメリットとデメリット

### メリット
- 処理が速い
- 動きが滑らか
- JavaScriptを使わなくても動く

### デメリット
- コード量が多くなる
- レガシーブラウザでは動かない


## CSSアニメーションの利用
AnimationとTransitionを利用するためには以下のプロパティを指定します。

### Transition

| プロパティ名 | 説明 |
|:-----------|:------------|
| transition-duration | 変化が始まって終わるまでの時間を指定する |
| transition-delay | 変化が始まる時間を指定する |
| transition-property | 変化が適用されるCSSのプロパティを指定する |
| transition-timing-function | 変化の度合いを指定する |
| transition | ショートハンド・プロパティ |

### Animation

| プロパティ名 | 説明 |
|:-----------|:------------|
| animation-name | アニメーションの名前 |
| animation-duration | アニメーションが始まって終わるまでの時間を指定する |
| animation-timing-function | アニメーションの進行の度合いを指定する |
| animation-delay | アニメーションが始まる時間を指定する |
| animation-iteration-count | アニメーションの繰り返し回数を指定する |
| animation-direction | アニメーションの再生方向を指定する |
| animation-fill-mode | アニメーションの開始前、終了後のスタイルを指定する |
| animation-play-state | アニメーションの再生・停止を指定する |
| animation | ショートハンド・プロパティ |

# アニメーションの実装
~~グダグダ書いていても面白くないので~~実装していきます。

## Transitionの利用
アニメーションは全て「:hover擬似クラス」を使用して説明します。ご了承ください。

### transition-duration
変化が始まって終わるまでの時間を指定します。指定しない場合は初期値の0sが適応されます。

| 値 | 単位 | 説明 |
|:-----------|:------------|:------------|
| 時間 | s(秒),ms(ミリ秒) | 変化に掛かる時間を指定する |

![1513660313.gif](https://qiita-image-store.s3.amazonaws.com/0/192833/5e4dc5ef-d6f9-5da9-db3d-993f444de5e6.gif)

**[サンプルコード](https://codepen.io/takashimelon/pen/bYPKwB)**



### transition-delay
変化が始まる時間を指定します。指定しない場合は初期値の0sが適応されます。

| 値 | 単位 | 説明 |
|:-----------|:------------|:------------|
| 時間 | s(秒),ms(ミリ秒) | 変化が始まる時間を指定する |

![1513662114.gif](https://qiita-image-store.s3.amazonaws.com/0/192833/052f2edd-5005-7463-1195-1e654b76de18.gif)

**[サンプルコード](https://codepen.io/takashimelon/pen/pdXKQV)**



### transition-property
変化が適用されるCSSのプロパティを指定します。複数のCSSプロパティに変化を適用する場合には、変化させるプロパティのリストをカンマ区切りで指定します。指定しない場合は初期値の```all```が適応されます。

| 値 | 説明 |
|:-----------|:------------|
| all(初期値) | 変化を適用できるプロパティすべてが変化する |
| none | どのプロパティも変化しない |
| プロパティ名 | 変化させるプロパティ名を指定する |

上が```none```下が```all```

![1513661721.gif](https://qiita-image-store.s3.amazonaws.com/0/192833/20cb5e0e-505d-4c42-0baa-b1ab2327b03b.gif)

**[サンプルコード](https://codepen.io/takashimelon/pen/QOXxbd)**



### transition-timing-function
変化の度合いを指定します。指定しない場合は初期値の```ease```が適応されます。

| 値 | 説明 |
|:-----------|:------------|
| ease(初期値) | 開始時と終了時が緩やかに変化する |
| linear | 開始から終了まで一定に変化する |
| ease-in | 開始時は緩やかに変化し、終了時に近づくと早く変化する |
| ease-out | 開始時は早く変化し、終了時は緩やかに変化する |
| ease-in-out | 開始時と終了時は、かなり緩やかに変化する |
| step-start | 変化の開始時点で終了状態に変化する|
| step-end | 開始時に変化せず、終了時に変化が完了した状態になる|
| steps(正数, start または end) | 指定した正数の段階で変化する。 start を指定すると、アニメーション開始時から変化し、 end を指定すると、アニメーション終了時に変化する。|
| cubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値) | 変化の度合いを3次ベジェ曲線で指定する |

cubic-bezierは割愛。

上から```ease``` ```linear``` ```ease-in``` ```ease-out``` ```ease-in-out``` ```step-start``` ```step-end``` ```steps(5, start)``` ```steps(5, end)```

![1513662478.gif](https://qiita-image-store.s3.amazonaws.com/0/192833/a1842117-bd69-b376-1141-137c7ebb7c1a.gif)

**[サンプルコード](https://codepen.io/takashimelon/pen/MOMXxq)**



##  Animationの利用

### animation-name
要素に適用するキーフレームアニメーションを指定します。
キーフレームアニメーションは```@keyframes 任意の名前```で定義します。

animation-nameプロパティだけでは、どのアニメーションを適用するかを設定しただけなのでまだ動きません。

### animation-duration
アニメーション開始から終了までの時間を指定します。指定しない場合は初期値の0sが適応されます。

| 値 | 単位 | 説明 |
|:-----------|:------------|:------------|
| 時間 | s(秒),ms(ミリ秒) | アニメーション開始から終了までの時間を指定する |

![1513694584.gif](https://qiita-image-store.s3.amazonaws.com/0/192833/1faf9eb1-77b1-f27d-12c5-336204bc513a.gif)

**[サンプルコード](https://codepen.io/takashimelon/pen/rpemjo)**



### animation-delay
アニメーションが始まる時間を指定します。指定しない場合は初期値の0sが適応されます。

| 値 | 単位 | 説明 |
|:-----------|:------------|:------------|
| 時間 | s(秒),ms(ミリ秒) | 変化が始まる時間を指定する |

![1513694679.gif](https://qiita-image-store.s3.amazonaws.com/0/192833/89bf927d-86f6-7794-c6b5-8e60f7fe4eb6.gif)

**[サンプルコード](https://codepen.io/takashimelon/pen/WdwjEM)**



### animation-timing-function
アニメーションの変化の度合いを指定します。指定しない場合は初期値の```ease```が適応されます。

| 値 | 説明 |
|:-----------|:------------|
| ease(初期値) | 開始時と終了時が緩やかに変化する |
| linear | 開始から終了まで一定に変化する |
| ease-in | 開始時は緩やかに変化し、終了時に近づくと早く変化する |
| ease-out | 開始時は早く変化し、終了時は緩やかに変化する |
| ease-in-out | 開始時と終了時は、かなり緩やかに変化する |
| step-start | 変化の開始時点で終了状態に変化する|
| step-end | 開始時に変化せず、終了時に変化が完了した状態になる|
| steps(正数, start または end) | 指定した正数の段階で変化する。 start を指定すると、アニメーション開始時から変化し、 end を指定すると、アニメーション終了時に変化する。|
| cubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値) | 変化の度合いを3次ベジェ曲線で指定する |

cubic-bezierは割愛。

上から```ease``` ```linear``` ```ease-in``` ```ease-out``` ```ease-in-out``` ```step-start``` ```step-end``` ```steps(5, start)``` ```steps(5, end)```

![1513694765.gif](https://qiita-image-store.s3.amazonaws.com/0/192833/3acbeff6-854b-d9b9-4a97-777110597969.gif)

**[サンプルコード](https://codepen.io/takashimelon/pen/PENjyX)**



### animation-iteration-count
アニメーションのループ回数を指定します。指定しない場合はアニメーションが1回実行されます。

| 値 | 説明 |
|:------------|:------------|
| 回数 | 指定した回数だけアニメーションを実行する |
| infinite | アニメーションを無限に繰り返す |

上から```1回``` ```2回``` ```infinite```

![1513694867.gif](https://qiita-image-store.s3.amazonaws.com/0/192833/981bed5e-135f-dad6-d411-7b8f8203f01c.gif)

**[サンプルコード](https://codepen.io/takashimelon/pen/zpqwmg)**



### animation-direction
アニメーションの再生方向を指定します。指定しない場合は初期値の```normal```が適応されます。

| 値 | 説明 |
|:-----------|:------------|
| normal | 毎回、順方向のアニメーションが再生される |
| reverse | 毎回、逆方向からのアニメーションが再生される |
| alternate | 順方向、逆方向のアニメーションを交互に繰り返す |
| alternate-reverse | 逆方向、順方向のアニメーションを交互に繰り返す |

上から```normal``` ```reverse``` ```alternate``` ```alternate-reverse```

![1513695071.gif](https://qiita-image-store.s3.amazonaws.com/0/192833/6d1a189d-5b85-1af1-c296-a5c73adf0802.gif)

**[サンプルコード](https://codepen.io/takashimelon/pen/ypObwZ)**



### animation-fill-mode
アニメーションの開始前、終了後のスタイルを指定します。指定しない場合は初期値の```none```が適応されます。

| 値 | 説明 |
|:-----------|:------------|
| none | アニメーションで指定したスタイルは、アニメーションの開始前、終了後には適用されない |
| forwards | アニメーション終了時のスタイルがアニメーション終了後にも適用される |
| backwards | アニメーション開始時のスタイルがアニメーション開始前にも適用される |
| both | forward と backwards の両方が適用される |

上から```none``` ```forwards``` ```backwards``` ```both```

![1513695206.gif](https://qiita-image-store.s3.amazonaws.com/0/192833/ca410a88-21db-2703-22bd-c96ec1821f90.gif)

**[サンプルコード](https://codepen.io/takashimelon/pen/GyZEoQ)**

### animation-play-state
アニメーションの再生・停止を指定します。指定しない場合は初期値の```running```が適応されます。

| 値 | 説明 |
|:-----------|:------------|
| running | アニメーションが実行される |
| paused | アニメーションが停止される |

上が```running```　下が```paused```

![1513695321.gif](https://qiita-image-store.s3.amazonaws.com/0/192833/0a8879b8-f5f7-6fa5-70d8-861a24c91267.gif)

**[サンプルコード](https://codepen.io/takashimelon/pen/ypObjQ)**

# 最後に
CSSアニメーションは楽しいです。是非皆さんもCSSアニメーションで遊んでみてください。

***
参考サイト
[CSSアニメーション 入門](https://qiita.com/soarflat/items/4a302e0cafa21477707f)
[【CSS3】Transition（変化）関連のまとめ](https://qiita.com/7968/items/812d6a21fc4dd9ae9c75)
[【CSS3】@keyframes と animation 関連のまとめ](https://qiita.com/7968/items/1d999354e00db53bcbd8)