2021/10/30
cssのみで実装できる！モーフィングアニメーション
今回はcssのみで動く、モーフィングアニメーションを紹介していきます。
まずモーフィングとは、映画やアニメーションの中で使用されるSFXの1つで、コンピュータグラフィックスの手法の1つでもあり、ある物体から別の物体へと自然に変形するものです。
テキストであればcssだけでもこちらのモーフィングアニメーションが可能となります。
仕組みに関しましては、CSSの「blur」と「contrast」を使い、文字をぼかして変化と変化の間をつなげていきます。
See the Pen
Untitled by yonekura-kohei (@yonekura-kohei)
on CodePen.
【HTML】
|
1 2 3 4 5 6 7 8 9 | <div class="morphing"> <div class="word">LaunchCart</div> <div class="word">越境ECカート</div> <div class="word">実績No.1</div> <div class="word">越境EC＆現地EC</div> <div class="word">制限のないデザイン</div> <div class="word">各国決済と連携</div> <div class="word">物流システム連携</div> </div> |
ここでは７つのワードをモーフィングしていきます。
【CSS】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap'); *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } body { font-family: 'Roboto Slab', serif; } .morphing { position: relative; font-size: 30px; background-color: #fff; color: #000; min-height: 100vh; filter: contrast(25) blur(1px); } .word { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: word 16s infinite ease-in-out; } .word:nth-child(1) { animation-delay: -16s; } .word:nth-child(2) { animation-delay: -14s; } .word:nth-child(3) { animation-delay: -12s; } .word:nth-child(4) { animation-delay: -10s; } .word:nth-child(5) { animation-delay: -8s; } .word:nth-child(6) { animation-delay: -6s; } .word:nth-child(7) { animation-delay: -4s; } @keyframes word { 0%, 5%, 100% { filter: blur(0px); opacity: 1; } 20%, 80% { filter: blur(1em); opacity: 0; } } |
今回はCSSのみで動くモーフィングアニメーション（テキスト）を実際に動かしてみました。
CSSではなく、SCSS等を使うとアニメーション速度の部分やワードの数等も一括で管理ができ、変更や調整が簡単になります。
実際のサイトでの使用頻度はあまり高くはないかも知れませんが、トップページのヒーロー画像等の上にあったりすると目を引きそうですね。
参考
CSSだけでモーフィングを実装できる！文字列を違う文字列に滑らかに変化させるCSSのテクニック(https://coliss.com/articles/build-websites/operation/css/pure-css-morphing.html)
Author Profile
スターフィールド編集部
SHARE
