カレーを例にしたCSSアニメーションのことはじめ

## カレー、ほかほかにさせたくない？

というわけで、今回はカレーに簡単なCSSアニメーションをつけていきたいと思います。

## 対象
* CSS書けるけど、もうちょっと表現を豊かにしたい人
* CSS アニメーションなんのこっちゃ
* カレーのルーはご飯の真上にぶっかける人

といった方に向けて書いていこうと思います。
CSSアニメーションのテクニックとか、速度を考慮したらこれがベストだ！等の
上級者向けのものは書きません。（当方まだまだペーペーなので）
あくまで基礎のご紹介です！

## そもそもCSSアニメーションって？
CSSは以下のように定義されています。

> カスケーディングスタイルシートCascading Style Sheets (CSS) はスタイルシート言語であり、 HTML や XML (方言である SVG, MathML, XHTML などを含む) で記述された文書の体裁や見栄えを表現するために用いられます。 CSS は、要素が画面上で (あるいは紙や音声といった別のメディア上で) どのように表現されるのかを定義します。

* スタイルシート言語である
* 文書の体裁・見栄えを表現する為に用いる

ざっとこのようなものです。

それを踏まえて、CSSアニメーションというのは
**要素をアニメーションさせるCSSの機能の1つ**であるとされています。

CSSアニメーションは

* Transition
* Animation

に大別されます。

ではそれぞれどういうものなのかを見てみます。

## 2種類のCSSアニメーション

上記で紹介した`Transition`と`Animation`についてそれぞれ説明します。

### Transition

Transitionは要素の状態間の変化を定義することができます。
例えば、`:hover`時や、`:active`時にtransitionを効かせることが可能です。

`「〜〜〜」を「〜〜〜」したら「〜〜」を「〜〜〜」に`状態変化させる。
と覚えておくとよいと思います。
~~「カレーに手」を「突っ込ん」だら「手」を「真っ赤」に状態変化させる。
みたいな感じ。サイコパス~~

また、transitionは一方通行！繰り返しません。

transitionで指定できるプロパティは以下です。

|  プロパティ名         |  効果             |  記述例           |
|--------------------|------------------|------------------|
| transition-property|トランジションの効果を適用するプロパティ|transition-property: opacity;|
| transition-duration|アニメーションの継続時間|transition-duration: 1s;|
| transition-timing-function|加速曲線の定義|transition-timing-function: ease-in;|
| transition-delay|アニメーションが始まるまでの待ち時間の定義|transition-delay: 250ms;|

これらのプロパティは、`transition`プロパティで一括指定できます。
`transition-property`は`all`にすつことで全てのプロパティへの適用ができます。

```
transition: {プロパティ名} {継続時間} {加速曲線} {待ち時間};
transition: margin-right 4s ease-in-out 1s;
```

長くなりましたが、Transitionのまとめは以下です。

* Transitionは状態を変化させるアニメーションを付与できる
    * `「〜〜〜」を「〜〜〜」したら`を指定する
* 1回きりであり、繰り返しの再生はできない
* 指定できるのは以下で、一括指定できる
    * トランジションを適用するプロパティ
    * アニメーションの継続時間
    * 加速曲線の定義
    * アニメーションが始まるまでの待ち時間

### Animation

続いてAnimationについてです。
Animationは要素の状態間の変化を定義するTransitionに対し、スタイル間のアニメーションを適用します

なので、Transitionの`「〜〜〜」を「〜〜〜」にしたら`部分はごっそり不要になり、
`「〜〜〜」を「〜〜〜」にする`のみの記述になります。

また、Animationはアニメーションの繰り返しを行うことが可能です。

animationプロパティで指定できるものは以下です。

|  プロパティ名         |  効果             |  記述例           |
|--------------------|------------------|------------------|
| animation-name |トランジションの効果を適用するプロパティ|transition-property: opacity;|
| animation-duration|アニメーションの継続時間|transition-duration: 1s;|
| animation-timing-function|加速曲線の定義|transition-timing-function: ease-in;|
| animation-delay|アニメーションが始まるまでの待ち時間の定義|transition-delay: 250ms;|
| animation-iteration-count|アニメーションが停止するまでの再生回数|animation-iteration-count: infitite;|
| animation-direction|再生の向きの設定|animation-direction: forwards;|
| animation-fill-mode|アニメーション再生中・再生後のスタイルの指定| animation-fill-mode: both;|
| animation-play-state|アニメーションが実行中か停止中かの設定|animation-play-state: paused;|

こちらも`animation`プロパティで一括指定できます。

```scss
animation: {アニメーション名} {継続時間} {加速曲線} {再生開始までの待ち時間} {再生の向き} {再生中・再生後のスタイル指定} {停止中or実行中};
animation: fadeIn 3s ease-in-out 1s reverse both running;
```


Animationのまとめは以下です。

* transitionより指定できるプロパティが多い
* 状態変化の`「〜〜〜」を「〜〜〜」にしたら`の指定はしない
* 繰り返し再生ができるし再生回数も指定できる

## アニメーション指定方法

### Transition

実際にtransitionを適用する場合は以下のようなコードになります。
例として、このカードにマウスオーバーした時に不透明度を下げましょう

<img width="219" alt="スクリーンショット 2019-12-17 15.26.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146512/92a13cf1-409c-2b14-f1e2-48ae221fcdab.png">

```html
<div class="card">
  <a class="card_link" href="#">
    <span class="card_title">おいしいカレー ¥500</span>
    <span class="card_image">
      <img  src="https://japaclip.com/files/curry-rice.png" alt="">
    </span>
  </a>
</div>
```

`transition`の対象を`.card`とし、マウスオーバー時の指定を`:hover`にしてあげます。

```scss
.card {
  color: #333;
  cursor: pointer;
  width: 200px;
  transition: opacity 1s ease-in-out; //transition対象を宣言
  &:hover {
    opacity: .7; //hover時の変化を指定
  }
}
```

<img width="219" alt="スクリーンショット 2019-12-17 15.29.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146512/2868b674-eee8-c0c1-e36b-e1ddc3ea3609.png">

ふわぁんと薄くなりましたね。

実際のコードは以下にあります。
https://codepen.io/thugumi-ishimaru/pen/BgxgrR?editors=1100

### Animation

animationを指定する時は、「何秒のときにどの状態」が必要になるので、
css側に`@keyframes`の作成が必要です。
構文は以下です。

```scss
@keyframes animation-name {
 0% {
  アニメーション開始時の処理 
 }
 100% {
  アニメーション完時の処理
 }
}
```

`animation-name`は任意の名前にしてください。
上記の`@keyframes`を作った上で、要素にanimationを適用させます。

こちらはせっかくなので、以下のカレーを題材にしましょう。

## カレーに湯気を......

はい、お待たせしました。
お腹空きましたかね、私まだお昼ご飯食べてないのでお腹空きました。

こんなカレー鍋を作りました。
湯気がゆらゆらしてるものです。
（スマホでバグってすみません）

<p class="codepen" data-height="631" data-theme-id="dark" data-default-tab="result" data-user="thugumi-ishimaru" data-slug-hash="vYEXoXG" style="height: 631px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="カレー鍋">
  <span>See the Pen <a href="https://codepen.io/thugumi-ishimaru/pen/vYEXoXG">
  カレー鍋</a> by Thugumi Ishimaru (<a href="https://codepen.io/thugumi-ishimaru">@thugumi-ishimaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


湯気（`.yuge`）を用意します。
~~class名雑なのは自覚あるので許して~~

```html
<div class="curryPot">
  <div class="curryPot_head">
     (中略)
    <div class="yuge"></div>
  </div>
     (中略)
</div>
```

`.yuge`の擬似要素に対して今回は
`opacity`と`transition`プロパティのアニメーションをつけます。
この時、アニメーションさせる対象の要素に対して、`@keyframes`の0%の状態と同じ値を
指定しておく必要があります。

```scss
.yuge {
  position: relative;
  &:before,
  &:after {
    animation: yugeUp 5s ease-in-out infinite; //ここが！アニメーションの！指定だよ！アニメーションの時間は5秒間！永遠再生してください！！！！
    opacity: 0; //@keyframesの0%のときと同じ値
    transform: translateY(-15px); //@keyframesの0%のときと同じ値
  }
  &:before {
    content: "";
    position: absolute;
    height: 200px;
    top: -250px;
    left: 60px;
    border-right: 0px solid transparent;
    border-top: 2px solid #fff;
    border-left: 135px solid #fff;
    border-bottom: 12px solid transparent;
    filter: blur(35px);
    z-index: 4;
    transform: rotate(168deg) skewY(10deg);
    border-radius: 80% 0 10% 10%;
  }
  &:after {
    content: "";
    height: 200px;
    top: -180px;
    right: 60px;
    display: block;
    position: absolute;
    border-right: 0px solid transparent;
    border-top: 2px solid #fff;
    border-left: 125px solid #fff;
    border-bottom: 12px solid transparent;
    filter: blur(35px);
    z-index: 4;
    transform: rotate(168deg) skewY(10deg);
    border-radius: 80% 0 10% 10%;
  }
}
```

で、css内に`@keyframes`を設定します。

```scss
@keyframes yugeUp {
  0% {
    opacity: 0;
    transform: translateY(-15px);
  }
  50% {
    opacity: .7;
  }
  100% {
    opacity: 0;
    transform: translateY(-250px);
  }
}
```

これでほかほかのカレーができました！
めしあがれ！！！！！！

## まとめ

今回はカレーを題材にしてCSSアニメーションを紹介しました。
以下を覚えてたらなんとなく、多分、実務で、できるかもしれません。

* transitionとanimationの2種類があるよ
* transitionは`「〜〜」に「〜〜」をしたら`の指定が必要だよ
* animationは`@keyframes`の設定と再生開始時の指定が必要だよ

もっと詳しく知りたい人はぜひ手元でCSSアニメーション使って遊んでみてください！

ありがとうございましたー！
引き続きよろしくお願いします。