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のみで作ることができるので、調べて見て下さい。
