JSFiddle - React, Tailwind, and code Playground
HTML
<div style=" background-color: black; width: 400px; height: 400px;">
<h2 class="slideToUnlock reverse">WATCH THIS FLASH ACROSS THE SCREEN</h2>
</div>
CSS
.slideToUnlock {
background: linear-gradient(-90deg, black 0%, gray 40%, white 45%, gray 55%, black 60%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
-webkit-animation: slidetounlock 5s infinite;
animation: slidetounlock 5s infinite;
-webkit-animation-direction: normal;
animation-direction: normal;
}
@-webkit-keyframes slidetounlock {
0% {
background-position: -100% 0;
}
100% {
background-position: 100% 0;
}
}