ドットが跳ねるテキスト
概要
強調したい時に使えるテキストの上にドットを付け、尚且つそれが順番に跳ねるというアニメーションです。
アニメーションのタイミングは、タグにそれぞれカスタムプロパティ--indexを持たせ、それを使ってanimation-delayで順番に動くよう調整しております。
ドットの位置は上下方向については、カスタムプロパティ--dot-assetで調整可能にしています。左右方向については文字の真ん中にするため、.dotクラスはletter-spacing: 0;としています。文字間のスペースを広げたい場合は、paddingやmarginで対応が可能です。
私のポートフォリオのトップでも使っているアニメーションです。
コードサンプル
HTML
<p>
<span style="--index: 0;" class="dot">T</span>
<span style="--index: 1;" class="dot">E</span>
<span style="--index: 2;" class="dot">X</span>
<span style="--index: 3;" class="dot">T</span>
</p>CSS
.dot {
--index: 0; /* インデックスのデフォルト値 */
--dot-size: 0.167em;
--dot-color: #333333;
--dot-asset: -0.2em;
position: relative;
letter-spacing: 0;
padding-inline: 0.1em;
}
.dot::before {
position: absolute;
inset-block-start: var(--dot-asset);
inset-inline: 0;
content: "";
display: block;
margin-inline: auto;
width: var(--dot-size);
aspect-ratio: 1 / 1;
background-color: var(--dot-color);
border-radius: 50%;
animation: bounce 3s infinite;
animation-delay: calc(0.1 * var(--index) * 1s); /* インデックスに基づいてアニメーション遅延 */
transform-origin: center bottom;
}
@keyframes bounce {
0% {
transform: scale(1, 1) translate(0%, 0%);
}
10% {
transform: scale(1.5, 0.5) translate(0%, 0%);
}
16% {
transform: scale(1, 1) translate(0%, 0%);
}
18% {
transform: scale(0.8, 1.3) translate(0%, -70%);
}
20% {
transform: scale(1, 1) translate(0%, -120%);
}
33% {
transform: scale(1, 1) translate(0%, 0%);
}
}