π₯Animated Changing Text Color
Step 1: Create a simple Div.
<div id="Toastify-Greeting">Animated Color</div>
Step 2: Adding the CSS
#Toastify-Greeting {
font-size: 5rem;
font-weight: 700;
font-family: bebas neue;
background: linear-gradient(45deg, #ccee52, #f176ba, #d2d8da, #23d5ab);
background-size: 300%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: animate 5s ease-in-out infinite;
text-align: center;
line-height: 0.9;
}
@keyframes animate {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
Last updated