CSS/JavaScriptで1文字ずつをアニメーションさせる

文字をアニメーションさせて目立たせるやり方です。 見出しに使ったりワンポイントに使ったりいろいろできると思います。 この記事では以下のpタグの文字をアニメーションさせていきます。 <p id="text">あいうえお</p> 文字の色を変える まずは簡単な色を変えるアニメーションです。 #text { animation: color-loop 1s infinite; } @keyframes color-loop { 0% { color: red; } 50% { color: blue; } 100% { color: red; } } 「animation: color-loop 1s infinite」はcolor-loopを1秒間で繰り返し(infinite)行うという意味です。 @keyframesは時間のどの割合の時に何を変更するかを指定します。赤から50％で青になり10