CSSだけでウネウネ動く円を作る

ウネウネ動くサンプル

円がウネウネと動いています。

ウネウネ動く CSS

HTML

<div class="uneCircle"></div>

div に class を付けてるだけです。この div をウネウネ動かします。

CSS

.uneCircle {
  border: 5px solid #87CCA1;
  animation: uneune 5s linear infinite; /* 5秒アニメーションをループ */
  width: 280px;
  height: 280px;
  margin: 50px auto;
}

@keyframes uneune {

  0% {
    border-radius: 60% 50% 70% 80% / 50% 60% 50% 70%; 
  }

  25% {
    border-radius: 70% 60% 60% 90% / 70% 80% 40% 90%; 
  }

  50% {
    border-radius: 60% 40% 70% 60% / 40% 60% 50% 60%; 
  }

  75% {
    border-radius: 90% 60% 40% 70% / 70% 50% 80% 40%; 
  }

  100% {
    border-radius: 60% 50% 70% 80% / 50% 60% 50% 70%; 
  }
}

CSS で楕円などを作るときに使う border-radius の指定を使います。正直あまり直感的な指定ではないなーと思うので、使いにくいのですが、/ スラッシュで分けて各角ごとに曲がる率みたいなものを決める感じです。

40% や 60% の数字を変えると、ウネウネ具合が変わります。40％ 以上ぐらいで設定してあげると、違和感なくウネウネしてくれる気がしました。

この border-radius の詳しい設定の仕方については以下を。

参考：今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！｜Webクリエイターボックス

当然、細かく keyframes アニメーションを指定すれば動きも細かくなります。

CSS

@keyframes uneune2 {

  0% {
    border-radius: 60% 50% 70% 80% / 50% 60% 50% 70%; 
  }

  12.5% {
    border-radius: 40% 70% 80% 50% / 80% 40% 60% 50%; 
  }

  25% {
    border-radius: 70% 60% 60% 90% / 70% 80% 40% 90%; 
  }

  37.5% {
    border-radius: 50% 50% 80% 40% / 50% 40% 60% 50%; 
  }

  50% {
    border-radius: 60% 40% 70% 60% / 40% 60% 50% 60%; 
  }

  62.5% {
    border-radius: 40% 50% 50% 40% / 50% 70% 60% 50%; 
  }

  75% {
    border-radius: 90% 60% 40% 70% / 70% 50% 80% 40%; 
  }

  87.5% {
    border-radius: 50% 70% 50% 40% / 80% 40% 60% 50%; 
  }

  100% {
    border-radius: 60% 50% 70% 80% / 50% 60% 50% 70%; 
  }
}

まとめ

この CSS の設定だと余りオシャレ感は出ないのですが、微調整をすればオシャレ感のある動きにもセンス次第で出来る気がします。

SVG なんかを使ってこんな感じのギミックを入れているサイトも多くなってきた気がします。ただ、SVG は使うのもけっこう大変なので CSS だけで代替的にできそうなことはやっても良いのかなと思ったりしてます。