Source code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Text Animation</title>
<style>
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #222;
margin: 0;
}
.wrapper{
font-family: Arial, sans-serif;
font-size: 4rem;
font-weight: bold;
color: white;
white-space: nowrap;
position: relative;
}
.text{
display: inline-block;
position: relative;
animation: slide-in 5s ease-in-out infinite;
}
@keyframes slide-in{
0%{
transform: translateX(100%);
opacity: 0;
}
25%{
transform: translateX(0%);
opacity: 1;
}
75%{
transform: translateX(0%);
opacity: 1;
}
100%{
transform: translateX(-100%);
opacity: 0;
}
}
.text span{
display: inline-block;
animation: color-change 5s infinite;
}
@keyframes color-change {
0%{ color:red }
20% { color:orange; }
40% { color:yellow; }
60% { color:green; }
80% { color:blue; }
100% { color:purple; }
}
.text span:nth-child(1) {
animation-delay: 0s;
}
.text span:nth-child(2) {
animation-delay: 0.2s;
}
.text span:nth-child(3) {
animation-delay: 0.4s;
}
.text span:nth-child(4) {
animation-delay: 0.6s;
}
.text span:nth-child(5) {
animation-delay: 0.8s;
}
.text span:nth-child(6) {
animation-delay: 1s;
}
</style>
</head>
<body>
<div class=”wrapper”>
<div class=”text”>
<span>D</span>
<span>O</span>
<span>O</span>
<span>L</span>
<span>O</span>
<span>T</span>
</div>
</div>
</body>
</html>
