マーカーを塗っているCSS

視界に入ると文字にマーカーを引く動作を行うCSSアニメーション

【CSS】

.marker-animation.active

　{
　　background-position: -100% .5em;
　}

.marker-animation

　{
　　background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
　　background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
　　background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
　　background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
　　background-image: linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
　　background-repeat: repeat-x;
　　background-size: 200% .8em;
　　background-position: 0 .5em;
　　transition: all 2s ease;
　　font-weight: bold;
　}

【HTML】

　ここにマーカーをつける文章をいれる

</span>

「class=“marker-animation”」このコードをマーカーを引きたいところに入れてください。

他の装飾と被っても記述個所を分ける必要はありませんので、同じ場所に入れてください。