mark {
--color1: #ffff00;
--color2: #ffff00;
--bg-height: 60%;
all: unset;
background-image: linear-gradient(var(--color1), var(--color2));
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 0 var(--bg-height);
animation: highlight 1600ms 1 ease-out;
animation-fill-mode: forwards;
animation-play-state: paused;
}

@-webkit-keyframes highlight {
to {
background-size: 100% var(--bg-height);
}
}

@keyframes highlight {
to {
background-size: 100% var(--bg-height);
}
}