BLOGブログ

CSSだけでモーフィングアニメーションを作る

2021.06.10

Web制作・ホームページ制作

 JavaScriptやSVGなども使わず、モーフィングアニメーションを作ることができるので、こちらの記事にまとめました。

実際に、作ったのが下記になります。

See the Pen qBrMZdE by Jun Yamagami (@Jun-Yamagami) on CodePen.

 

テキストと図形のモーフィングアニメーションを作成しました。
アニメーション量を増やす場合は、cssも調節が必要になります。

今回のアニメーションで重要となるcssを紹介します。

プロパティ内容説明使用例
animation :スタイル間のアニメーションを適用します。
他の幾つかの CSS プロパティを一度に設定できます。
「animation: fruit 7s infinite ease-in-out;」は、「fruitというクラスが7秒間にease-in-outをやり続ける」となります。
クラス名:nth-child(数字)兄弟要素のグループの中での位置に基づいて選択します。「li:nth-child(2)」リスト内の2番目になるli要素を選択してます。
animation-delay :アニメーションをいつ開始するか指定します。「animation-delay: 2s」2秒後に開始するとなります。
filter :ぼかしや色変化などのグラフィック効果を要素に適用します。「filter : blur(0px)」ぼかしの値になります。pxが大きくなるほど、ぼかしは強くなります。
@keyframes クラス名一連の CSS アニメーションの中間ステップを制御します。今回は、「0%、5%、100%」と「20%、80%」のときにぼかしの制御しています。

テキストの変化は変化させたい文字を同じ場所に重ねてそれぞれanimation-delayで開始時間をずらしています。
filterと@keyframesを使ってモーフィングを実現しています。
次々変化してるように見えますが、テキストは15秒かけて一周、図形は5秒かけて一周を繰り返しているだけです。
filter: contrastとblurで溶ける様を演出。

特別すごく難しいcssを使用しているわけではありませんので、すぐに理解できると思います。

まとめ

今回はモーフィングアニメーションのみの紹介でしたが、ほかにもさまざまなアニメーションをcssのみで作ることができるので、調べて見て下さい。