Looping Animation of text color change using CSS3
Use keyframes
and animation
property
p {
animation: color-change 1s infinite;
}
@keyframes color-change {
0% { color: red; }
50% { color: blue; }
100% { color: red; }
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad quos autem beatae nulla in.</p>
CSS With Prefixes
p {
-webkit-animation: color-change 1s infinite;
-moz-animation: color-change 1s infinite;
-o-animation: color-change 1s infinite;
-ms-animation: color-change 1s infinite;
animation: color-change 1s infinite;
}
@-webkit-keyframes color-change {
0% { color: red; }
50% { color: blue; }
100% { color: red; }
}
@-moz-keyframes color-change {
0% { color: red; }
50% { color: blue; }
100% { color: red; }
}
@-ms-keyframes color-change {
0% { color: red; }
50% { color: blue; }
100% { color: red; }
}
@-o-keyframes color-change {
0% { color: red; }
50% { color: blue; }
100% { color: red; }
}
@keyframes color-change {
0% { color: red; }
50% { color: blue; }
100% { color: red; }
}
I have a small css, you can use this
body {
background-color: #333;
display: flex;
justify-content:center;
align-items: center;
height: 100vh;
}
.text-rainbow-animation {
font-family:arial black;
font-size:70px;
background-image:
linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet, red);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: rainbow-animation 35s linear infinite;
}
@keyframes rainbow-animation {
to {
background-position: 4500vh;
}
}
<div class="text-rainbow-animation">RAINBOW TEXT</div>