Marquee
マーキー
MOTIONDESIGN
どんな動き？
テキストやロゴなどを横一列に並べ、途切れることなく一定速度で流れ続けさせるループアニメーション。複製したコンテンツを繋げてループ地点を目立たなくするのが実装のコツ。ブランドロゴの一覧や見出しの装飾、注目ワードを目立たせたいセクションで頻繁に使われる。
よく使う場所
ロゴ一覧見出し装飾お知らせティッカー
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
※生成AIは英語のアニメーション用語を指定する方が意図通りの崩れにくいコードを出力するため、プロンプトは英語で構成しています。そのままAIのチャット欄に貼り付けて使えます。
Scroll a duplicated row of text or logos horizontally in an infinite loop.Trigger:
Load (starts automatically and loops continuously).
Initial state:
translateX: 0
Animation:
The track, containing the content duplicated once, 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: 15–20s, easing: linear, iteration-count: infinite.実装方法の候補
この動きは以下の技術で実装できます。
CSS animation (infinite)
別名・関連ワード
TickerScrolling TextInfinite Marquee