❯❯❯ 低コスト・低リスクでグローバル展開!
「アジア越境ECの補助金・助成金プラン」
はこちら

LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

cssのみで実装できる!モーフィングアニメーション

テクニック

cssのみで実装できる!モーフィングアニメーション

今回はcssのみで動く、モーフィングアニメーションを紹介していきます。

まずモーフィングとは、映画やアニメーションの中で使用されるSFXの1つで、コンピュータグラフィックスの手法の1つでもあり、ある物体から別の物体へと自然に変形するものです。

テキストであればcssだけでもこちらのモーフィングアニメーションが可能となります。

仕組みに関しましては、CSSの「blur」と「contrast」を使い、文字をぼかして変化と変化の間をつなげていきます。

See the Pen
Untitled
by yonekura-kohei (@yonekura-kohei)
on CodePen.

【HTML】

ここでは7つのワードをモーフィングしていきます。

【CSS】

今回はCSSのみで動くモーフィングアニメーション(テキスト)を実際に動かしてみました。

CSSではなく、SCSS等を使うとアニメーション速度の部分やワードの数等も一括で管理ができ、変更や調整が簡単になります。

実際のサイトでの使用頻度はあまり高くはないかも知れませんが、トップページのヒーロー画像等の上にあったりすると目を引きそうですね。

参考

CSSだけでモーフィングを実装できる!文字列を違う文字列に滑らかに変化させるCSSのテクニック(https://coliss.com/articles/build-websites/operation/css/pure-css-morphing.html)

この記事を書いた人
yonekuraのアイコン

yonekura

気になったモノを自身の勉強の為、記録として書いています。