Karaoke Highlight Text
カラオケのようにテキストが左から順番にハイライトされていく。
HTML
<p class="kht-text">This is animated highlight text effect</p>
CSS
.kht-text {
font-size: 22px;
font-weight: 700;
color: #475569;
background: linear-gradient(90deg, #6366f1 50%, #475569 50%);
background-size: 200% 100%;
background-position: 100% 0;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: kht-fill 3s ease-in-out infinite alternate;
}
@keyframes kht-fill {
0% { background-position: 100% 0; }
100% { background-position: 0% 0; }
}