WebMachine,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style>
.anm {
height: 160px;
padding: 20px;
background: url(https://img-cdn.tinkoffjournal.ru/cover-samara-inside.8vuijdvbtrl0.jpg);
}
.masc {
font: 120px Arial;
display: inline-block;
overflow: hidden;
margin: 0;
font-weight: 800;
color: transparent;
background: linear-gradient(115deg, rgba(255,0,0,1) 0%, rgba(255,0,0,1) 44%, rgba(255,255,255,1) 48%, rgba(255,0,0,1) 53%, rgba(255,0,0,1) 100%);
background-size: 6em 100%;
animation-duration: 4.5s;
animation-name: slide;
animation-iteration-count: infinite;
background-position: 0 0;
-webkit-background-clip: text;
-moz-background-clip: text;
-o-background-clip: text;
background-clip: text;
}
@keyframes slide {
0% {
background-position: 100% 0;
}
40% {
background-position: 100% 0;
}
100% {
background-position: 0 0;
}
}
</style>
<div class="anm">
<h1 class="masc">Text</h1>
</div>
</body>
</html>