CSS3实现歌词进度文字颜色填充变化动态效果的思路详解

<div style="padding:15% 35%; text-align:center;">
    <span class="text">从左往右填充文字颜色</span>
</div>

@keyframes scan {
	0% {
		background-size:0 100%;
	}
	100% {
		background-size:100% 100%;
	}
}
.text {
	background:#7e7e7e -webkit-linear-gradient(left, #fff, #fff) no-repeat 0 0;
	-webkit-text-fill-color:transparent;
	-webkit-background-clip:text;
	background-size:0 100%;
}
.load {
	background-size:100% 100%;
	animation: scan 5s linear;
}

window.onload=function(){
    $('.text').addClass('load');
}