1文字ずつ上下に波打つ楽しげなテキスト演出。文字をspanに分けてanimation-delayをずらすスタッガーの応用です。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
文字を1つずつspanで包み、同じ上下アニメーションに0.1秒ずつのdelayを与えると波に見えます。キーフレームの山を30%に置いている（50%ではなく）のは、上がる動きを素早く・戻りをゆっくりにして弾む感じを出すためです。親のaria-labelに全文を持たせ、分割したspanが1文字ずつ読み上げられるのを防いでいます。
文字分割はアクセシビリティと引き換えです。装飾的な短い単語だけに使い、本文には使わないでください。
このテキストの各文字が順番に上下に波打つアニメーションを付けて。1文字ずつspanで分けて、animation-delayでずらして。
波打つテキストをスクリーンリーダーで1文字ずつ読まれないように、aria-labelで元の文字列を渡して。
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。