CSS：応用編（アニメーション）

# CSSでアニメーション
このCSS・・・動くぞ！
をメインタイトルに書いていきます！
他にも書きたいことはいっぱいありますが、
まずはアニメーションで。

## アニメーションさせよう
CSSでのアニメーションはCSS3から対応となっています。
簡易的なアニメーションであればCSSだけで対応可能です！

## transition
`transition`を使うだけでも簡易的なアニメーションは可能です。
まずは下記コードをご覧ください。
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="trust-k-yamazaki" data-slug-hash="jOMVLwX" 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="translate animation">
  <span>See the Pen <a href="https://codepen.io/trust-k-yamazaki/pen/jOMVLwX">
  translate animation</a> by Katsunari Yamazaki (<a href="https://codepen.io/trust-k-yamazaki">@trust-k-yamazaki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

このように簡易的なアニメーションであれば爆速で開発可能なのです。

簡単に内容を説明していきます。

```
transition: transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値
```

#### transition-property
変化を起こす属性を限定できます。（safariですとうまく動作せず。。。今回は省略しています。）
#### transition-duration
変化の動作時間を設定できます。s（秒）とms（ミリ秒）が設定可能です。
#### transition-timing-function
変化の動作内容を指定できます。
ここでは簡単なもの（設定だけでOKのもの）を紹介します。
詳しい内容はリンクにしておくので、そちらをご参照ください。

|属性値名|説明|
|---|---|
|ease|開始時と終了時は緩やかに変化する|
|linear|開始から終了まで一定に変化する|
|ease-in|開始時は緩やかに、終了に近づくと早く変化する|
|ease-out|開始時は早く、終了に近づくと緩やかに変化する|
|ease-in-out|開始時と終了時はかなり緩やかに変化する|

cubic-bezierを使うなら [こちら](https://cubic-bezier.com)

#### transition-delay
変化開始までの待ち時間を設定できます。s（秒）とms（ミリ秒）が設定可能です。

## transform
要素の位置や形を変化できる属性です。
transitionと組み合わせると複雑な動きにも対応可能です。
3D軌道での変形も可能なのですが、複雑なためここでは2Dでの変形を紹介します。
3Dは最後におまけで書きます！

### translate（移動）について
縦横斜めへ移動可能です。
<p class="codepen" data-height="206" data-theme-id="dark" data-default-tab="css,result" data-user="trust-k-yamazaki" data-slug-hash="jOMVGrE" style="height: 206px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="transform:translate animation">
  <span>See the Pen <a href="https://codepen.io/trust-k-yamazaki/pen/jOMVGrE">
  transform:translate animation</a> by Katsunari Yamazaki (<a href="https://codepen.io/trust-k-yamazaki">@trust-k-yamazaki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### rotate（回転）について
縦横回転可能です。また要素の上下回転なども可能です。
設定値の`deg`は角度になります。時計回りはポジティブ反時計回りはネガティブな値を設定してください。

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="trust-k-yamazaki" data-slug-hash="ZEpBXxe" 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="transform:rotate animation">
  <span>See the Pen <a href="https://codepen.io/trust-k-yamazaki/pen/ZEpBXxe">
  transform:rotate animation</a> by Katsunari Yamazaki (<a href="https://codepen.io/trust-k-yamazaki">@trust-k-yamazaki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


### scale（伸縮）について
縦横を指定の比率で引き伸ばしたり縮めたりすることが可能です。

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="trust-k-yamazaki" data-slug-hash="RwGoLqO" 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="transform:scale animation">
  <span>See the Pen <a href="https://codepen.io/trust-k-yamazaki/pen/RwGoLqO">
  transform:scale animation</a> by Katsunari Yamazaki (<a href="https://codepen.io/trust-k-yamazaki">@trust-k-yamazaki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### skew（傾斜）について
縦横の傾斜を指定可能です。
回転と同じく`deg`角度で指定します。

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="trust-k-yamazaki" data-slug-hash="RwGoLOz" 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="RwGoLOz">
  <span>See the Pen <a href="https://codepen.io/trust-k-yamazaki/pen/RwGoLOz">
  RwGoLOz</a> by Katsunari Yamazaki (<a href="https://codepen.io/trust-k-yamazaki">@trust-k-yamazaki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## キーフレームアニメーションについて
ここまででお腹いっぱいになってませんか？
ここまではまだ朝飯前です。
これからBrakeFirstといきましょう！

また`animation`属性を使って要素をアニメーションさせることができます。
試しにマウスを乗せると動く出すアニメーションを作りました。
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="trust-k-yamazaki" data-slug-hash="YzGpEKb" 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="animation for css">
  <span>See the Pen <a href="https://codepen.io/trust-k-yamazaki/pen/YzGpEKb">
  animation for css</a> by Katsunari Yamazaki (<a href="https://codepen.io/trust-k-yamazaki">@trust-k-yamazaki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

それぞれについて説明しましょう。

### keyframes
`@keyframes `はアニメーション定義用の文法です。
開始から終了までのアニメーションを記載することが可能です。

```
animation: animation-nameの値 animation-durationの値 animation-timing-functionの値 animation-delayの値 animation-iteration-countの値 animation-directionの値 animation-fill-modeの値 animation-pray-stateの値
```

### animation-name
キーフレームで作ったアニメーションの名称を設定します。

### animation-duration
アニメーションの動作時間を設定します。
s（秒）とms（ミリ秒）を設定できます。

### animation-timing-function
以下の設定が可能です。
cubic-bezierを使うなら [こちら](https://cubic-bezier.com)

|属性値名|説明|
|---|---|
|ease|開始時と終了時は緩やかに変化する|
|ease-in|開始時は緩やかに、終了に近づくと早く変化する|
|ease-out|開始時は早く、終了に近づくと緩やかに変化する|
|ease-in-out|開始時と終了時はかなり緩やかに変化する|
|linear|開始から終了まで一定に変化する|
|step-start|開始時に最終の状態になる|
|step-end|終了時に最終の状態になる|

### animation-delay
アニメーション開始までの待機時間が設定できます。

### animation-iteration-count
アニメーションの繰り返し回数を指定できます。
`infinite` とすることで無限に繰り返すようになります。

### animation-direction
アニメーションの実行方向を設定できます。
下記一覧を参照してください。

|属性値名|説明|
|---|---|
|normal|毎回、順方向のみの繰り返しとなる|
|reverse|毎回、逆方向のみの繰り返しとなる|
|alternate|順方向、逆方向が交互に行われる|
|alternate-reverse|逆方向、順方向が交互に行われる|

### animation-fill-mode
アニメーション開始前と終了後のスタイルを指定できます。

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

### animation-pray-state
アニメーションの再生・停止を指定できます。

|属性値名|説明|
|---|---|
|paused|停止|
|running|実行|

## おわりに
つ、疲れました。。。
まあまあかけたんじゃないでしょうか。

あとで私が作ったローダーでも挙げておきます！