マーカーを塗っている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”>
 ここにマーカーをつける文章をいれる
</span>
 
「class=“marker-animation”」このコードをマーカーを引きたいところに入れてください。
他の装飾と被っても記述個所を分ける必要はありませんので、同じ場所に入れてください。