Split Text
スプリットテキスト
Split Text
どんな動き？
テキストを1文字ずつ分割し、それぞれをわずかな時間差でふわっと浮かび上がらせるアニメーション。単語や文章がパラパラと組み上がっていく様子が印象的で、キャッチコピーや見出しなど文字自体を主役にしたい場面のアクセントとして使われる。
よく使う場所
キャッチコピー見出しロゴアニメーション
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Split the text into individual characters and fade each one up with a slight stagger.Trigger:
When the element enters the viewport (Intersection Observer).
Initial state:
Text split into individual <span> characters.
Each character: opacity: 0, translateY: 60%
Animation:
Each character fades up into place, offset by a small delay based on its index.
Final state:
Each character: opacity: 1, translateY: 0
Timing:
duration: 0.5s per character
stagger delay: 0.04s between characters
easing: ease-out
Play only once.実装方法の候補
この動きは以下の技術で実装できます。
JavaScript (テキスト分割)GSAP SplitTextCSS (animation-delay)
別名・関連ワード
Character SplitLetter By Letter