CSS animation で遊び倒す - うねうねアニメーション -

CSS animation day49 となりました。
本日は、border radius を使ったアニメーションを作ります。


#1. 完成版


![ダウンロード (59).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/43c704c8-8df9-e0b1-fe30-d5ac176aef95.gif)


<p class="codepen" data-height="" data-theme-id="" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="eXGyzG" style="height: 431px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Interesting Sunset">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/eXGyzG/">
  Interesting Sunset</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. なぜか？

デザインが素敵なウェブサイトを探していたところ、流体デザインの[サイト](https://bodymovin.solutions/)に出会いました。
個人的に、2019年に大流行すると思っております。

その中に、このうねうねした動きを見つけました。
瞬く間に魅了され、一体これはどうやってできているか？と思ったのが、このCSS animationをやろうと思ったきっかけです。


#3. 参考文献
[9 Elements: CSS Border-Radius Can Do That?](https://medium.com/9elements/css-border-radius-can-do-that-d46df1d013ae)
[border-radius](https://codepen.io/enbee81/pen/LBMKqV)
[うねうねジェネレーター](https://9elements.github.io/fancy-border-radius/full-control.html#10.10.10.10-90.90.90.90-.)
#4. 分解してみる

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

```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="circle"></div>
    </div>
  </body>
</html>

```


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

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

.circle {
  width: 300px;
  height: 300px;
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  border-radius: 50%;
}
```
![スクリーンショット 2019-03-12 9.13.44.png](https://qiita-image-store.s3.amazonaws.com/0/232715/76873468-f9a1-79b7-4d52-ed9fac41e59c.png)

普通の円ができました。
<br/>
❷.
border-radius　をいじっていきましょう。

参考文献の、[うねうねジェネレーター](https://9elements.github.io/fancy-border-radius/full-control.html#34.29.73.45-46.31.58.58-.) を使います。

![スクリーンショット 2019-03-12 9.18.47.png](https://qiita-image-store.s3.amazonaws.com/0/232715/f58b052d-0192-39b3-8e3d-e42398c17e29.png)



自分で好きな形に点を動かしってカスタマイズし、border-radius を設定しましょう。

```styles.scss
.circle {
  width: 300px;
  height: 300px;
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  border-radius: 48% 69% 56% 53% / 47% 73% 43% 49%;
}
```

![スクリーンショット 2019-03-12 9.24.17.png](https://qiita-image-store.s3.amazonaws.com/0/232715/fe186360-6786-3389-f708-4dbd54f91a73.png)

いい感じの形になりました。


❸. 
アニメーションをつけましょう。

```styles.scss

.circle {
        　 ・・・
  animation: move 8s linear infinite;
}

@keyframes move {
  50% {
    border-radius: 80% 20% 59% 41% / 72% 21% 79% 28%;
  }

  75% {
    border-radius: 100% 69% 100% 83% / 68% 99% 53% 93%;
  }
}
```
![ダウンロード (59).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/ce932eed-7f9b-9f92-206d-6c5a0e4d53e5.gif)


参考文献のWeb サイトのような動きになりました！
興味深いですね。。

❹.
最後に、中央に景色を表示しましょう。

```index.html
 <body>
    <div class="container">
      <div class="circle">
        <div class="image"></div>
      </div>
    </div>
  </body>
```

```styles.scss
.image {
  width: 300px;
  height: 300px;
  background: url("../img/sunset.png");
  background-size: cover;
  background-position: 35% center;
}
```

<p class="codepen" data-height="" data-theme-id="" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="eXGyzG" style="height: 431px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Interesting Sunset">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/eXGyzG/">
  Interesting Sunset</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>


border radius をいじるだけで、簡単に素敵な effectを作れますね。
CSS は本当に奥が深いです。
それでは、また明日〜