CSS animation で遊び倒す - Skew animation  スライム-

CSS animation day30 となりました。
ついに、１ヶ月経ちました。継続することって本当に難しいですね・・。　


私の人生のミッション(使命)は、世界の裏側の小さな小さな病院を、アートが取り入れられている環境にすることです。そこでは、患者さんだけでなく職員も癒され、医療というマイナスでストレスフルなイメージが、全く違うものになる未来になっています。
　

自分がこの取り組みをやめてしまうと、この未来は永劫に来ないと思っており、のしかかる責任は重大と考えております。これからも、医師として、エンジニアとして、design とart を学び発信していきます。　　　



#1. 完成版
![ezgif.com-optimize (8).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/8f79e147-90ee-05d5-7484-ec4c28c4953f.gif)

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

#2. 参考文献
[Tips note](https://www.tam-tam.co.jp/tipsnote/html_css/post11618.html)
[Jello Stapler](https://codepen.io/WithAnEs/pen/dKLOeY)
[スライム無料画像](https://www.kisspng.com/png-dragon-quest-monsters-joker-2-dragon-quest-ix-drag-889348/)

#3. 分解してみる

❶. 
マークアップしましょう。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="slime"></div>
    </div>
  </body>
</html>
```


```styles.scss
body {
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.slime {
  background: url("../img/slime.png");
  background-position: center center;
  background-size: cover;
  display: block;
  height: 800px;
  width: 800px;
}
```
![slime.png](https://qiita-image-store.s3.amazonaws.com/0/232715/ec78ca90-fda9-e052-54d7-3122137a5ce3.png)


うん、可愛いですね。

❷.
では、このスライムにskew animation をつけて、動きを観察しましょう。

まずは、X軸のみ、skew をかけます。

```styles.scss
.slime {
  background: url("../img/slime.png");
  background-position: center center;
  background-size: cover;
  display: block;
  height: 600px;
  width: 600px;
  animation: move 6s linear infinite;
}

@keyframes move {
  0% {
    transform: skew(0deg, 0deg);
  }
  10% {
    transform: skew(10deg, 0deg);
  }
  20% {
    transform: skew(-8deg, 0deg);
  }
  30% {
    transform: skew(6deg, 0deg);
  }
  40% {
    transform: skew(-4deg, 0deg);
  }
  50% {
    transform: skew(2deg, 0deg);
  }
  100% {
    transform: skew(0deg, 0deg);
  }
}
```

![ダウンロード (14).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/02439753-67b1-a497-d516-85d3644fad33.gif)

横にフリフリ動きました。

続いて、Y軸にskewをかけましょう。

```styles.scss
@keyframes move {
  0% {
    transform: skew(0deg, 0deg);
  }
  10% {
    transform: skew(0deg, 10deg);
  }
  20% {
    transform: skew(0deg, -8deg);
  }
  30% {
    transform: skew(0deg, 6deg);
  }
  40% {
    transform: skew(0deg, -4deg);
  }
  50% {
    transform: skew(0deg, 2deg);
  }
  100% {
    transform: skew(0deg, 0deg);
  }
}
```

![ダウンロード (16).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/5fdabfc3-1a91-ea99-3997-c5823cab3b11.gif)

今度は縦に動きました。

この2つの結果からわかることは、つのを動かしたい時には、skewX,  ボディを動かしたい時は、skewYが良さそうです。

では、rotate を組み合わせたら、どうなるでしょうか？

__rotate + skewY__

```styles.css
@keyframes move {
  0% {
    transform: skew(0deg, 0deg);
  }
  10% {
    transform: skew(0deg, 10deg) rotate(10deg);
  }
  20% {
    transform: skew(0deg, -8deg) rotate(-10deg);
  }
  30% {
    transform: skew(0deg, 6deg) rotate(10deg);
  }
  40% {
    transform: skew(0deg, -4deg) rotate(-10deg);
  }
  50% {
    transform: skew(0deg, 2deg) rotate(10deg);
  }
  100% {
    transform: skew(0deg, 0deg);
  }
}
```
![ダウンロード (17).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/57bc21f2-62fc-9dcb-d8dc-607cdebea2ad.gif)


さっきのと、違いがわかりますでしょうか？笑

skew だけの時は、顔が伸びていましたが、rotate使うと補正が入り、修正されました。顔が常にまっすぐ向くようになって、違和感がなくなりましたね！


❸.
では、これらを全てうまく使って、スライムらしい動きを作りましょう。


```styles.scss
@keyframes move {
  0% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(2deg, 4deg) rotate(3deg);
  }
  10% {
    transform: skew(-2deg, -2deg) rotate(-3deg);
  }
  15% {
    transform: skew(1deg, 1deg);
  }
  20% {
    transform: skew(2deg, 0deg);
  }
  50% {
    transform: skew(0deg, 4deg) rotate(1deg);
  }
  55% {
    transform: skew(18deg, -16deg);
  }
  60% {
    transform: skew(-15deg, 16deg);
  }
  65% {
    transform: skew(4deg, -4deg) rotate(-3deg);
  }
  80% {
    transform: skew(-4deg, 2deg) rotate(-1deg);
  }
  100% {
    transform: skew(0deg, 0deg);
  }
}
```

![ezgif.com-optimize (7).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/2ea20e54-09d9-9450-3ef3-9c1820d9a95e.gif)


出来上がりました。

❹.
ディズニーによって開発された、[アニメーションの12原則](http://the12principles.tumblr.com/)というものがあるそうで、これをみてイメージを掴みつつ、アニメーションへ取り入れます。

```styles.scss


@keyframes move {
  0% {
    transform: skew(0deg, 0deg);
  }
  10% {
    transform: skew(2deg, 4deg) rotate(3deg);
  }
  15% {
    transform: skew(-2deg, -2deg) rotate(-3deg);
  }

  20% {
    transform: skew(2deg, 0deg);
  }
  30% {
    transform: skew(0deg, 2deg);
  }
  50% {
    transform: scale(6, 2) translate(0, -1000px);
  }

  55% {
    transform: scale(1), translate(0, 0);
  }

  58% {
    transform: translate(0, 200px);
  }

  60% {
    transform: translate(0, -240px) skew(-5deg, 10deg);
  }

  65% {
    transform: translate(0, 60px);
  }

  68% {
    transform: translate(0, -60px) skew(5deg, -10deg);
  }

  75% {
    transform: translate(0, 40px);
  }
  77% {
    transform: translate(0, -20px) skew(1deg, 2deg);
  }
  83% {
    transform: translate(0, 10px);
  }
  85% {
    transform: translate(0, -5px) (0, -20px) skew(1deg, 1deg);
  }
  86% {
    transform: translate(0, 3px);
  }
  90% {
    transform: translate(0, -1px);
  }
  93% {
    transform: translate(0, 3px);
  }
  100% {
    transform: skew(0deg, 0deg);
  }
}
```
![ezgif.com-optimize (8).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/a20a18b3-77e0-a45e-a1b5-bed2e218fab2.gif)


記念すべき１ヶ月目が気の抜けた作品になりました。。

みなさま、これからもよろしくお願いいたします！
それでは、また明日〜