【CSSだけのスライダー/SP対応】transform・keyframe・animationで無限ループで流れ続けるスライダー作ってみた

今回は、最近のwebサイトではよく見かけるようになったCSSだけのシームレススライダーを作ってみます。以前はslickやbxsliderなどのjsライブラリを使ってましたが、流すだけならCSSでも可能。GPTにきいてみたところ『keyflameの位置調整でシームレスにできる』と教えてくれたので、さっそく作ってみます。

今回使うCSSプロパティなど

今回のCSSスライダーに使うプロパティなどをまとめました。最近では実装例も多くメジャーになっており、いまさらという感じがしますが、

CSS transform（回転や拡大縮小、傾斜、移動）

とある要素を移動させたりできるもので、直感的なのはtransformでしょうか。今回のケースでは横に流れるスライダーなので『transform: translateX();』を使ってみます。

CSS transform
https://developer.mozilla.org/ja/docs/Web/CSS/transform

CSS animation

名前の通り、スタイルの間のアニメーションを適用します。スライダー用としては『animation: 〇〇 45s linear infinite;』のような指定になるかと。45sは45秒間、easingの値はlinear（一定スピード）で、繰り返し回数をinfinite（無限ループで繰り返す）というような意味です。

また、〇〇の部分にはアニメーション名などに使う識別子を入れます。調べたところ『custom-ident』と呼ぶそうです。

CSS animation
https://developer.mozilla.org/ja/docs/Web/CSS/animation

custom-ident（アニメーション名などに使う識別子）
https://developer.mozilla.org/ja/docs/Web/CSS/custom-ident

CSS @keyframes

プロパティというよりはCSSのアットルールなんですけど、今回割と重要なので確認。『キーフレーム（または中間地点）のスタイルを定義』するのに使います。『〇〇%のときは◇◇、●●%のときは△△』のような指定もできるので、CSS transitionよりも細かく指定できます。カンタンなものはtransitionでサクッと指定、のように使い分けたりしています。

@keyframes
https://developer.mozilla.org/ja/docs/Web/CSS/@keyframes

transform・@keyframes・animationでスライダー作るコード例

コードはこのような形になりました。CSSとhtml部分で、関係なさそうなところは省略しています。PCのほかに大きめタブレット・ipad miniなどの小型タブレット・SPなどに応じて、メディアクエリで画像表示サイズを変更しています(transform: scaleとかでもよいかも？)。

ポイントは同じループの二回し目と@keyframesのtranslateX(-50%)です。GTPにきいたらシームレスにするのにこれが返ってきました。試しにtranslateX(-100%)やtranslateX(-30%)とかにしてみたら、ループ後がパッと消えた感じとか、ズレて始まったりするので、この値になるようです。

custom-ident（アニメーション名などに使う識別子）は、『marquee-left』という名前にして、@keyframesで定義してanimationプロパティで使う、という流れです。

transform・@keyframes・animationでスライダー表示例

では早速動作確認。 画像だと止まってますが、実際はこれがエンドレスで横に流れていきます。動作サンプルはこのコラムのサーバーに置いてあるので、あとでご確認ください。

タブレット用表示です。 画像サイズ変えただけで、特にスピードとかは変えていません。

SP用表示です。 こちらもサイズ変えただけ。

実際に動作確認いただけるサンプルは以下のurlです。古いブラウザとかだと動かないかもしれないけど、edgeやchromeで確認しました。

css transform/keyframe/animationでスライダーてすと
https://division-web.atelier-ss-agency.com/test/2025-10-css-slider/

あとがき・まとめ

まとめると、こんなところでしょうか。調べたところ、工夫して縦に流したりもできるようなので、押さえておくといろいろ応用できるかもしれません。