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

schedule Published
Category folderJumble
format_list_bulleted Contents

こういうのはSVGを使うのが真っ先に思い浮かぶが、CSSでも流体シェイプを作れると知ったのでやってみた。作った各コマのシェイプ通りに動かすオーダーだと、CSSで忠実にシェイプを再現するのは難しそうだが、コードも書きながらデザインしたりシェイプのディテールを相談できる場合はCSSでの実装でよいかもしれない。

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

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

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

border-radius

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

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

あとは@keyframesanimationを使って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だけですごいアニメーションを作っているすごい方もいるが、自分には挑戦する根性もない。

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