横に流れ続けるテキスト
常時CSSのみテキスト
Text Text
右から左へテキストがずっと流れ続けるアニメーションです。
実装のポイント
1文の表示幅のあらかじめ算出し、その幅分のラッパー要素とテキスト用の要素に分けます。中のテキストはtext-shadowで幅分ずらして文字をコピーしています。そうすることで必要な1ループ分の文字を作り出せます。
あとはこの中のテキスト要素をtranslateプロパティで幅分右から左へアニメーションさせれば完成です。幅は固定値になるので、CSS変数をつかっています。
コード例
HTML
<p class="sampleText">
<span class="textInner">Text Text</span>
</p>
CSS
.sampleText {
--width: 264px; /* 1文の表示の幅 */
width: var(--width);
overflow: hidden;
line-height: 1;
}
.textInner {
display: inline-block;
text-shadow: var(--width) 0 0 currentColor;
animation-name: scrollingText;
animation-duration: 1.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes scrollingText {
0% {
translate: 0 0;
}
100% {
translate: calc(var(--width) * -1) 0;
}
}