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だけですごいアニメーションを作っているすごい方もいるが、まだまだ自分にはできそうにない。

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