Buchstaben verschieben mit Animation

<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style type="text/css">
.words { color: green; font-family:Cambria; font-weight:bold; font-size: 2em; line-height: 2.5;}
.words span { font-size: 3rem; display: inline-block; animation: move 3s ease-in-out infinite;}
@keyframes move {
0% { transform: translate(-30%, 0); }
50% { text-shadow: 0 25px 50px black; }
100% { transform: translate(30%, 0); } }

.words span:nth-child(2) { animation-delay: 0.5s;}
.words span:nth-child(3) { animation-delay: 1s;}
.words span:nth-child(4) { animation-delay: 1.5s;}
.words span:nth-child(5) { animation-delay: 2s;}
.words span:nth-child(6) { animation-delay: 2.5s;}
.words span:nth-child(7) { animation-delay: 3s;}
.words span:nth-child(8) { animation-delay: 3.5s;}
.words span:nth-child(9) { animation-delay: 4s;}
.words span:nth-child(10) { animation-delay: 4.5s;}
.words span:nth-child(11) { animation-delay: 5s;}
.words span:nth-child(12) { animation-delay: 5.5s;}
.words span:nth-child(13) { animation-delay: 6s;}
.words span:nth-child(14) { animation-delay: 6.5s;}
.words span:nth-child(15) { animation-delay: 7s;}
.words span:nth-child(16) { animation-delay: 7.5s;}
.words span:nth-child(17) { animation-delay: 8s;}
.words span:nth-child(18) { animation-delay: 8.5s;}
.words span:nth-child(19) { animation-delay: 9s;}
.words span:nth-child(20) { animation-delay: 9.5s;}
</style>
</head>

<body>
<div class="words word-1">
H
T
L
M
k
n
o
w
h
o
w
-
i
s
t
-
C
O
O
L
</div>
</body>

</html>

html knowhow

Buchstaben verschieben mit Animation

Buchstaben verschieben mit Animation