動く蛍光ペン風マーカーの実装CSS

style.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;
}
.m-blue {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgba(107, 182, 255, 0.24) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgba(107, 182, 255, 0.24) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgba(107, 182, 255, 0.24) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgba(107, 182, 255, 0.24) 50%);
    background-image: linear-gradient(left, transparent 50%, rgba(107, 182, 255, 0.24) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 2s ease;
    font-weight: bold;
}
.m-green {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgba(151, 232, 154, 0.69) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgba(151, 232, 154, 0.69) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgba(151, 232, 154, 0.69) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgba(151, 232, 154, 0.69) 50%);
    background-image: linear-gradient(left, transparent 50%, rgba(151, 232, 154, 0.69) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 2s ease;
    font-weight: bold;
}
.m-red {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgba(255, 88, 88, 0.2) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgba(255, 88, 88, 0.2) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgba(255, 88, 88, 0.2) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgba(255, 88, 88, 0.2) 50%);
    background-image: linear-gradient(left, transparent 50%, rgba(255, 88, 88, 0.2) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 2s ease;
    font-weight: bold;
}

⬇️このコードの使い方を紹介しているブログ記事はこちら
https://noripon.blog/2020/03/15/how-to-make-css-design-moving-highlighter/