サイン波による上下の浮遊感。ロゴ・ビジュアル要素に使用。
animation: gentle-float 5s ease-in-out infinite
background-clip: text によるグラデーション文字。インパクトのある見出しに。
background: linear-gradient(135deg, #025DCC, #00C6FF)
-webkit-background-clip: text
テキストを1文字ずつ「タイプ」して複数の文字列をサイクル。注目度の高いヒーローに有効。
new TypeWriter(el, ['text1', 'text2'])
IntersectionObserver でスクロール検知。イーズアウトで止まる数値カウントアップ。
new CounterAnimation('.counter-number')
CSSアニメーションでループするSVGウェーブ。Heroセクションの底辺で使用。画像ゼロ。
animation: move-forever 25s cubic-bezier infinite
SVGのstrokeDashoffsetを動かし、光が走るシャインを表現。ロゴアニメーションに応用。
@keyframes loopShine { strokeDashoffset }