CSSだけで流体シェイプのモーフィングアニメーションを作る

CSSで流体シェイプの作り方

CSSのborder-radiusプロパティを使って流体シェイプを作ることができます。普段は四隅に一律の角丸しか使ったことが無かったので新鮮です。

四隅バラバラにも指定できますが、さらに細かく水平方向と垂直方向をわけて指定することができます。

形を調整しながら数値を出してくれる「FANCY-BORDER-RADIUS」や「Border Radiusジェネレーター」などを使うと便利です。ありがたいありがたい。

• FANCY-BORDER-RADIUSopen_in_new
• Border Radiusジェネレーターopen_in_new

CSSで流体シェイプのモーフィングアニメーションを作る

あとは@keyframesとanimationを使ってborder-radiusの値を変えます。
作品ではないので適当ですが、やってみると想定した動きや納得のいく動きにするのは難しいです。色の変化や回転などを組み合わせるのもよさそうです。

div.fluid {
    width: 50%;
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 61% 39% 16% 84% / 57% 72% 28% 43%;
    animation: fluid-anim 20s infinite;
    background: rgb(147,161,176);
}

@keyframes fluid-anim {
    0%    { border-radius: 65% 35% 55% 45% / 55% 50% 55% 45%; }
    12.5% { border-radius: 60% 75% 40% 80% / 70% 70% 60% 65%; }
    25%   { border-radius: 55% 95% 65% 90% / 75% 65% 85% 70%; }
    37.5% { border-radius: 60% 40% 50% 45% / 60% 40% 60% 40%; }
    50%   { border-radius: 55% 95% 65% 90% / 75% 65% 85% 70%; }
    62.5% { border-radius: 60% 40% 50% 45% / 60% 40% 60% 40%; }
    75%   { border-radius: 60% 75% 40% 80% / 70% 70% 60% 65%; }
    87.5% { border-radius: 40% 60% 55% 45% / 50% 60% 40% 50%; }
    100%  { border-radius: 65% 35% 55% 45% / 55% 50% 55% 45%; }
}

流体シェイプ以外のモーフィングアニメーション

流体シェイプ以外でもCSSで作られたモーフィングアニメーションを紹介します。

おわりに

古いCSSの知識がベースで止まったままなので、またひとつアップデートできた感じで楽しかったです。CSSだけですごいアニメーションを作っているすごい方もいますが、まだまだ自分にはできそうにありません。

次は他の方法でもモーフィングアニメーションを作ってみたいと思います。