Keyframes

Example 1

<style>
.container {
background: #000;
}

h1 {
color: white;
-webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 40%, black 60%);
mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 40%, black 60%);
-webkit-mask-size: 250% 100%;
mask-size: 250% 100%;
-webkit-mask-position: 0% 0;
mask-position: 0% 0;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: mask;
animation-name: mask;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}

@-webkit-keyframes mask {
from {
-webkit-mask-position: 0% 0;
mask-position: 0% 0;
}
to {
-webkit-mask-position: 100% 0;
mask-position: 100% 0;
}
}

@keyframes mask {
from {
-webkit-mask-position: 0% 0;
mask-position: 0% 0;
}
to {
-webkit-mask-position: 100% 0;
mask-position: 100% 0;
}
}
</style>
<div class="container">
<h1>Lorem, ipsum.</h1>
</div>