CSSだけで自動横スクロールするアニメーションを実装する方法

JSなどは使わず、CSSだけで自動横スクロールするアニメーションを実装したい。
本記事ではこのような悩みを解決。
実装方法について解説します。
実装サンプル
See the Pen
CSSだけで自動横スクロール by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
テキストが自動で無限横スクールされてるのがわかります。
実装手順は以下の通りです。
HTMLを準備
<!-- 親要素 -->
<div class="parent">
<!-- 自動横スクロールさせたい要素 -->
<p>横スクロールテキスト横スクロールテキスト横スクロールテキスト</p>
</div>
まずは自動横スクロールさせたい要素をHTMLで用意します。
横スクロール要素とそれを囲う親要素を任意のHTMLタグで作成します。
CSSでアニメーションを付与
// 親要素
.parent {
overflow: hidden;
}
// 横スクロール要素
p {
animation: scrollAnime 20s linear infinite;
white-space: nowrap;
}
@keyframes scrollAnime {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
自動横スクロールさせるCSSです。
自動横スクロールにはanimationプロパティを使用します。
使い方は以下の通りです。
animation: アニメーション名 秒数 linear(等しい速度) infinite(無限);
@keyframesでアニメーションの流れを指定します。
transform: translateX();を付与。
水平方向に0~100%で移動するように設定します。
横スクロール要素が改行しないようにwhite-space: nowrap;を指定します。
親要素にoverflow: hidden;を付与。
横スクロール要素以外でスクロールされるのを防ぎます。
以上、CSSだけで自動横スクロールの完成です。
まとめ
お知らせ等を自動横スクロールで見せたい時に便利です。
以上で解説を終わります。