@keyframes animation

<!DOCTYPE html>
<html lang=en>
<head>
<title></title>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width">
<style>
.opaque {    font-size:100px;opacity:1;text-shadow: 4px 4px 10px red;
             font-family:arial;font-weight:900;    }
a {   text-decoration:none;   }
.opaque:nth-child(1) {  animation: opaque 3s linear infinite 1s;     }
.opaque:nth-child(2) {  animation: opaque 3s linear infinite 2s;     }
.opaque:nth-child(3) {  animation: opaque 3s linear infinite 3s;     }
.opaque:nth-child(4) {  animation: opaque 3s linear infinite 4s;     }
.opaque:nth-child(5) {  animation: opaque 3s linear infinite 5s;     }
.opaque:nth-child(6) {  animation: opaque 3s linear infinite 6s;     }
.opaque:nth-child(7) {  animation: opaque 3s linear infinite 7s;     }

@keyframes opaque {
50% {   opacity:0.2;     }

}
</style>
</head>
<body>
<a href='https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp'>
<span class='opaque'>L</span>
<span class='opaque'>O</span>
<span class='opaque'>A</span>
<span class='opaque'>D</span>
<span class='opaque'>I</span>
<span class='opaque'>N</span>
<span class='opaque'>G</span>
</a>
</body>
</html>