Source code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>DooloTech Animation</title>
<style>
body{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: black;
overflow: hidden;
}
.text-container{
font-family: sans-serif;
font-size: 3.5rem;
font-weight: bold;
display: flex;
color: white;
animation: moveText 4s linear infinite;
}
.text-container span{
animation: colorChange 4s linear infinite;
}
@keyframes moveText{
0%{
transform: translateX(100%);
}
50%{
transform: translateX(0);
}
100%{
transform: translateX(-100%);
}
}
@keyframes colorChange{
0%, 100%{
color: #ff0000;
}
25%{
color: #00ff00;
}
50%{
color: #0000ff;
}
75%{
color: #ffff00;
}
}
.text-container span:nth-child(1){
animation-delay: 0.1s;
}
.text-container span:nth-child(2){
animation-delay: 0.2s;
}
.text-container span:nth-child(3){
animation-delay: 0.3s;
}
.text-container span:nth-child(4){
animation-delay: 0.4s;
}
.text-container span:nth-child(5){
animation-delay: 0.5s;
}
.text-container span:nth-child(6){
animation-delay: 0.6s;
}
.text-container span:nth-child(7){
animation-delay: 0.7s;
}
.text-container span:nth-child(8){
animation-delay: 0.8s;
}
.text-container span:nth-child(9){
animation-delay: 0.9s;
}
.text-container span:nth-child(10){
animation-delay: 0.9s;
}
</style>
</head>
<body>
<div class=”text-container”>
<span>D</span>
<span>o</span>
<span>o</span>
<span>l</span>
<span>o</span>
<span>t</span>
<span>T</span>
<span>e</span>
<span>c</span>
<span>h</span>
</div>
</body>
</html>
