新着
アニメーションFade In On Scroll
Content that fades and rises into place as it enters the viewport.
#scroll#reveal#fade
6 個のフレームワーク中級
Loading…
Text whose letters bob up and down in a staggered wave.
<style>
@keyframes wave { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-0.35em); } }
.wave-letter { display: inline-block; animation: wave 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .wave-letter { animation: none; } }
</style>
<span class="inline-flex text-3xl font-bold text-blue-600 dark:text-blue-400" aria-label="Hello">
<span class="wave-letter" style="animation-delay: 0ms;">H</span>
<span class="wave-letter" style="animation-delay: 80ms;">e</span>
<span class="wave-letter" style="animation-delay: 160ms;">l</span>
<span class="wave-letter" style="animation-delay: 240ms;">l</span>
<span class="wave-letter" style="animation-delay: 320ms;">o</span>
</span>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
text必須 | string | - | ボタンが押されたときにクリップボードへ書き込まれる文字列。 |
className | string | '' | ルート要素にマージされる追加クラス。 |
Each letter animates on an offset delay for the wave. Reduced motion holds every letter still.