# ウニョウニョ動くロゴアニメーションをCSSとJavaScriptで作る
HTMLとCSS、それにJavaScriptを使って、ロゴをウニョウニョ動かすアニメーションを実装する方法を紹介します。
HTMLでロゴをSpanでラップ
まずHTMLではロゴのテキストをSpanタグで文字ごとにラップします。
<p>
<span>P</span>
<span>r</span>
<span>o</span>
<!-- 中略 -->
</p>
このSpanに対して個別にアニメーションを適用していきます。
CSSでアニメーションを指定
CSSでは@keyframesを使って、font-variation-settingsプロパティを変化させるアニメーションを定義します。
@keyframes breath {
0% {
font-variation-settings: "wght" var(--min);
}
100% {
font-variation-settings: "wght" var(--max);
}
}
各Spanタグにこのアニメーションを適用することで、ウニョウニョ効果を実現できます。
JavaScriptでタイミングをずらす
そしてJavaScriptを使って各文字のアニメーションタイミングをずらします。
span.style.animationDelay = i * 0.5 + 's';
これにより文字ごとに遅延が入り、なめらかな動きになります。
できあがり!
このようにHTML/CSS/JSを組み合わせることで、程よいモーションを持ったロゴアニメを作ることができます。モダンなWebサイト制作に役立ててください。
共有