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

1. 完成版

See the Pen Interesting Sunset by hiroya iizuka (@hiroyaiizuka) on CodePen.

# 2. なぜか？

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

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

3. 参考文献

9 Elements: CSS Border-Radius Can Do That?
border-radius
うねうねジェネレーター

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%;
}

普通の円ができました。

❷.
border-radius　をいじっていきましょう。

参考文献の、うねうねジェネレーターを使います。

自分で好きな形に点を動かしってカスタマイズし、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%;
}

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

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

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%;
  }
}

参考文献の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;
}

See the Pen Interesting Sunset by hiroya iizuka (@hiroyaiizuka) on CodePen.

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