Infinite Carousel
無限カルーセル
どんな動き？
複数のカードを横一列に並べ、marqueeと同様に複製したセットを繋げて途切れなく流れ続けさせるループアニメーション。テキストの帯ではなくカードや商品画像を流すため、実績一覧・お客様の声・商品ラインナップなど、複数のコンテンツを省スペースで見せたいときに使われる。
よく使う場所
お客様の声商品一覧実績ロゴ
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Scroll a duplicated row of cards horizontally in an infinite loop.Trigger:
Load (starts automatically and loops continuously).
Initial state:
translateX: 0
Animation:
A row of cards, duplicated once end-to-end, translates left continuously; when it reaches -50% the loop restarts seamlessly at 0.
Final state:
translateX: -50% (visually identical to 0, loops seamlessly)
Timing:
duration: 20–30s, easing: linear, iteration-count: infinite.実装方法の候補
この動きは以下の技術で実装できます。
CSS animation (infinite)JavaScript carousel library
別名・関連ワード
Auto-scrolling CarouselLogo CarouselContinuous Carousel