CSS　アニメーション

## 目次
1. [transitionについて](#1-transitionについて)
2. [animationについて](#2-animationについて)

## 1. transitionについて

### transition
* スタイルの変更の開始時から終了時までの挙動を設定する
* 開始時と終了時を定義するには？
  * :hoverなどの疑似クラス(:active, :focusなど)を使用する
  * javascriptを使用して、CSSのプロパティを変更する

例

```css:css(transition)
.sample {
  background-color: red;
  width: 200px;
  height: 200px;
  transition: all 0.5s ease-out;
}

.sample:hover {
  background-color: blue;
  width: 300px;
}
```
結果
![ezgif-2-de02b8a0c7c2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662954/33cea8d5-0ca2-09d3-837b-8dacad0b6257.gif)

### transitionのプロパティを個別に設定する場合
以下の4つのプロパティが存在する。

* <strong>transition-property</strong>　トランジションを適用する対象のCSSのプロパティの名前を指定
* <strong>transition-duration</strong>　トランジションにかかる時間を指定
* <strong>transition-timing-function</strong>　トランジションの速度変化を指定
* <strong>transition-delay</strong>　トランジションを開始するまでの時間を指定

**transition-property**
トランジションを適用する対象のCSSのプロパティの名前を指定

```css:css(transition-property)
.sample{
  background-color: red;
  width: 200px;
  height: 200px;
  transition-property: width;     /* transitionの設定が適用されるのは、widthのみ */
  transition-duration: 5s;
}

.sample:hover {
  background-color: blue;
  width: 300px;
}

```

**transition-propertyに設定できる値**
・all　全てのプロパティ
・none　プロパティ未指定
・margin-rightなど個別のプロパティ

例

```css:css(transition-property)
.sample{
  background-color: red;
  width: 200px;
  height: 200px;

  transition-property: all;     /* 全てのプロパティ(この場合、widthとbackground-color)が対象 */
  transition-property: none;    /* 未指定 */
  transition-property: width, background-color /* widthとbackground-colorが対象 */
  transition-duration: 5s, 10s; /* 複数対応、widthが5sで、background-colorが10sで変わる */
}

.sample:hover {
  background-color: blue;
  width: 300px;
}
```

---

**transition-duration**
トランジションにかかる時間を指定

```css:css(transition-duration)
.sample{
  background-color: red;
  width: 200px;
  height: 200px;
  transition-property: width;
  transition-duration: 5s;   /* 5sかけてスタイルが変更される */
}

.sample:hover {
  background-color: blue;
  width: 300px;
}
```

---

**transition-timing-function**
トランジションの速度変化を指定

**transition-timing-functionに設定できる値**

* ease　開始時と終了時は緩やかに変化
* linear　開始から終了まで一定に変化
* ease-in　開始時は緩やかに変化、終了に近づくと早く変化
* ease-out　開始時は早く変化、終了に近づくと緩やかに変化
* ease-in-out　easeよりもゆっくり入り、加速し、ゆっくり終わる
* step-start　開始自転で終了状態の値に変化する
* step-end　終了時点まで変化せず、終了時点で終了状態の値に変化する
* steps(ステップ数、ディレクション)　時間的変化をステップ数の数にステップに等分に区切って不連続に変化させる
、ディレクションにはstart or endを指定する
* cubic-beizer　自分でカスタムする

```css:css(transition-timing-function)
.sample{
  background-color: red;
  width: 200px;
  height: 200px;

  transition-property: width;
  transition-duration: 5s;

  transition-timing-function: ease;
  transition-timing-function: linear;
  transition-timing-function: ease-in;
  transition-timing-function: ease-out;
  transition-timing-function: ease-in-out;
  transition-timing-function: step-start;
  transition-timing-function: step-end;
  transition-timing-function: steps(6, end);
  transition-timing-function: cubic-bezier(.29, 1.01, 1, -0.68);
}

.sample:hover {
  background-color: blue;
  width: 300px;
}
```

---

**transition-delay**
トランジションを開始するまでの時間を指定

```css:css(transition-delay)
.sample{
  background-color: red;
  width: 200px;
  height: 200px;
  transition-property: width;
  transition-duration: 5s;
  transition-delay: 5s;  /* 5s後にスタイルの変更が始まる */
}

.sample:hover {
  background-color: blue;
  width: 300px;
}
```

---

### transitionのプロパティをまとめて設定する場合

個別に設定した時と同様、
* transition-property
* transition-duration
* transition-timing-function
* transition-delay
を設定する。

```css:css(transition)

.sample {
  /* プロパティ名 | 時間 */
  transition: margin-right 4s;

  /* プロパティ名 | 時間 | 遅延 */
  transition: margin-right 4s 1s;

  /* プロパティ名 | 時間 | 時間関数 */
  transition: margin-right 4s ease-in-out;

  /* プロパティ名 | 時間 | 時間関数 | 遅延 */
  transition: margin-right 4s ease-in-out 1s;

  /* 2つのプロパティへの適用 */
  transition: margin-right 4s, color 1s;
  
  /* 変化するすべてのプロパティへの適用 */
  transition: all 0.5s ease-out;
}
```

## 2. animationについて

### animation
* キーフレームを利用したアニメーションを設定できる

```css:css
@keyframes キーフレーム名 {
  0% { 始点のキーフレーム：アニメーションさせたいプロパティの初期状態 }
  100% { 終点のキーフレーム：アニメーションさせたいプロパティの最終状態 }
}
または
@keyframes キーフレーム名 {
  from { 始点のキーフレーム：アニメーションさせたいプロパティの初期状態 }
  to { 終点のキーフレーム：アニメーションさせたいプロパティの最終状態 }
}
```

例

```css:css(animation)

/* 「%」は時間の割合を示す */
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation: my_anime 3s;  /* 3sかけてbackground-colorが変わっていく */
}
```
結果

![画面収録-2021-03-08-21.11.29.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662954/4d4195a6-c6a8-b2e1-c766-ff7012370415.gif)

---

### animationのプロパティを個別に設定する場合
以下のプロパティが存在する。

* <strong>animation-name</strong>　アニメーション名（キーフレーム名）を指定
* <strong>animation-duration</strong>　アニメーションにかかる時間（1回分）を指定
* <strong>animation-timing-function</strong>　アニメーションの速度変化を指定
* <strong>animation-delay</strong>　アニメーションを開始するまでの時間を指定
* <strong>animation-iteration-count</strong>　アニメーションの繰り返し回数
* <strong>animation-direction</strong>  アニメーションの繰り返し方法（再生方向）を指定
* <strong>animation-fill-mode</strong>  ディレイ中と再生後の表示状態を指定
* <strong>animation-play-state</strong>　アニメーションの再生と一時停止を指定

**animation-name**
アニメーション名（キーフレーム名）を指定

```css:css(animation-name)
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation-name: my_anime;
  animation-duration: 3s;
}
```

---

**animation-duration**
アニメーションにかかる時間（1回分）を指定

```css:css(animation-duration)
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation-name: my_anime;
  animation-duration: 3s;
}
```

---

**animation-timing-function**
アニメーションの速度変化を指定

```css:css(animation-name)
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation-name: my_anime;
  animation-duration: 3s;

  animation-timing-function: ease;
  animation-timing-function: linear;
  animation-timing-function: ease-in;
  animation-timing-function: ease-out;
  animation-timing-function: ease-in-out;
  animation-timing-function: step-start;
  animation-timing-function: step-end;
  animation-timing-function: steps(6, end);
  animation-timing-function: cubic-bezier(.29, 1.01, 1, -0.68);
}
```

---

**animation-delay**
アニメーションを開始するまでの時間を指定

```css:css(animation-name)
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation-name: my_anime;
  animation-duration: 3s;

  animation-delay: 3s;
}
```

---

**animation-iteration-count**
アニメーションの繰り返し回数

```css:css(animation-name)
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation-name: my_anime;
  animation-duration: 3s;

  animation-iteration-count: 2.5;
  animation-iteration-count: infinite;  /* infiniteで無限に繰り返す */
}
```

---

**animation-direction**
アニメーションの繰り返し方法（再生方向）を指定

```css:css(animation-name)
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation-name: my_anime;
  animation-duration: 3s;

  animation-direction: normal;             /* 順方向にアニメーション */
  animation-direction: alternate;          /* 繰り返し時、偶数回は逆方向にアニメーション */
  animation-direction: reverse;            /* 逆方向にアニメーション */
  animation-direction: alternate-reverse;  /* 繰り返し時、奇数回は逆方向にアニメーション */
}
```

---

**animation-fill-mode** 
ディレイ中と再生後の表示状態を指定

```css:css(animation-name)
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation-name: my_anime;
  animation-duration: 3s;

  animation-fill-mode: none;       /* 元のスタイルのまま */
  animation-fill-mode: forwards;   /* 再生後、要素のスタイルは最後のキーフレーム状態のまま */
  animation-fill-mode: backwards;  /* 再生前、要素のスタイルは最初のキーフレーム状態に戻る */
  animation-fill-mode: both;       /* forwards, backwardsの両方を満たす */
}
```

---

**animation-play-state**
アニメーションの再生と一時停止を指定

```css:css(animation-name)
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation-name: my_anime;
  animation-duration: 3s;

  animation-play-state: running;  /* アニメーションは実行中 */
  animation-play-state: paused;   /* アニメーションは一時停止している */
}
```

### animationのプロパティをまとめて設定する場合

以下のような順番で設定が可能
animation: キーフレーム名 アニメーションにかかる時間 イージング 遅延時間 繰り返し回数 再生方向;

```css:css
animation:sample_anime 0.3s ease-in-out 3s infinite alternate both;
```