[CSSアニメーション]CSSだけで、まなちゃん（ねこ）を作って動かす　〜動かす編〜

こんにちは。

[\[CSS/HTML\]CSSだけで、まなちゃん（ねこ）を作って動かす　〜作る編〜 \- Qiita](https://qiita.com/super-mana-chan/items/a90b81454843214aab02)
の記事の動かす編。

前回はまなちゃんへの愛とまなちゃんをCSSで作るところまで説明した。
ちなみに出来上がった動くまなちゃんはこれ。

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

今回はまなちゃんの動きについて説明する。
まなちゃん結構動いてるけど、実はそんなに複雑ではないのだ。

説明していく:point_up_tone1:

#CSSアニメーションの基本
簡単にいうと

* `@keyframes`で**動き**（アニメーション）を指定
* `animation`プロパティで、`@keyframes`を指定

#まなちゃんの動きに統一感を

まなちゃんのパーツの動きに統一感をだしたいため、
顔自体の揺れる動き以外（**耳・目・鼻(ω)・ひげ**）は、

* **`@keyframes`では30%で動かす**
* **アニメーションのスピードを5秒、ループ数を無限に設定**

`animation: {keyframes名} 5s(秒数) infinite(無限ループ);`





#耳の動き

耳を倒してなでてもらう場所を確保するまなちゃんを表現

```scss:animation
@keyframes ear-l {
    0%{
      transform: rotate(0deg); 
    }
    30% {
      transform: rotate(-45deg); 
    }
    100%{
      transform: rotate(0deg); 
    }
}
@keyframes ear-r {
    0%{
      transform: rotate(0deg); 
    }
    30% {
      transform: rotate(45deg); 
    }
    100%{
      transform: rotate(0deg); 
    }
}
```
**回転してない耳**
↓
**45°角度がついた耳**
↓
**回転してない耳**

`rotate`は要素を回転させる指定である。
**`rotate(45deg)`は右に45°回転するという指定になる。**
要素を回転させることで、耳を倒すことを表現した。

#目の動き

目を閉じることで、まなちゃんの感情の高ぶりを表現

```scss:animation
@keyframes eye {
    0%{
       height: 20px;
    }
    30% {
      height: 5px;
    }
    100%{
       height: 20px;
    }
}
```

**高さ20pxの目**
↓
**高さ5pxの目**
↓
**高さ20pxの目**

`height`は高さを指定している。

まなちゃんの目のサイズの高さはもともと`20px`なので、
**それを`5px`にして細くする。**

これで目を閉じる動きができる。

#「ω」の動き

口を開けて、喜びを伝えようとするまなちゃんを表現

```scss:animation
@keyframes nouse {
    0%{
       height: 50px;
    }
    30% {
      height: 25px;
    }
    100%{
       height: 50px;
    }
}
```

「ω」の部分は、疑似要素`after`と`before`で表示しているので、
そこに`animation`は指定する。

**高さ50pxの「ω」**
↓
**高さ25pxの「ω」**
↓
**高さ50pxの「ω」**

目と同じように、もともと`50px`の高さの「ω」を`25px`に細くする。

**細くし、下にある口を見せることで**
口が開いたように表現している。

#ひげの動き

まばらなおひげの角度を変えることで、こっちに来るまなちゃんを表現

```scss:animation
@keyframes beard-l {
    30% {
      transform: rotate(-1deg); 
    }
}
@keyframes beard-r {
    30% {
      transform: rotate(1deg); 
    }
}
```

**`0%`と`100%`の指定がないのは、静止状態で、要素自体に`rotate`で角度を指定してるため**

**3本それぞれの角度**
↓
**3本すべての角度を1°に**
↓
**3本それぞれの角度**

`rotate`で回転の指定を1°だけつける。

#顔全体の動き

揺れながらこっちに向かってくる、ごきげんなまなちゃんを表現

```scss:animation
@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotate(0deg) scale(1)}
    30% {transform: translate(2px, 2px) rotate(2deg) scale(0.95)}
    50% {transform: translate(0px, 2px) rotate(0deg) scale(0.95)}
    75% {transform: translate(2px, 0px) rotate(-1deg) scale(1)}
    100% {transform: translate(0px, 0px) rotate(0deg) scale(1)}
}
```

耳・目・鼻(ω)・ひげより、少し細かく動きの指定をする。

`transform`プロパティは空白で区切り複数の変化をつけることが出来る。

**`translate`**
要素の位置を指定する。指定方法は
`({縦方向に移動させるpx},{横方向に移動させるpx})`
のような感じ。

**`rotate`**
おなじみの要素を回転させる角度を指定する。

**`scale`**
要素の大きさを倍率で指定する。

**元の位置で、角度もなく、大きさもそのまま**
↓
**下に2px、右に2px移動、右に2°回転、大きさを95%**
↓
**縦方向は元の位置に、右に2px移動したまま、回転を戻す、大きさを95%**
↓
**下に2px、横方向は元の位置に、左に1°回転、大きさを戻す**
↓
**元の位置で、角度もなく、大きさもそのまま**

#まとめ
まなちゃんを動かしてみて、CSSアニメーションについて前より理解できた。
意外に複雑な動きをつけなくても、まなちゃんの愛らしい姿を表現できてとても嬉しい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/ca72478c-6f36-14c3-c76e-28d418f3807e.png)