I know how to make that with JS but in http://daneden.github.io/animate.css/ Animate.css text changes so smoothly and there's no JS on it!
Can someone explain me?
Thanks
Join Stack Overflow to learn, share knowledge, and build your career.
I know how to make that with JS but in http://daneden.github.io/animate.css/ Animate.css text changes so smoothly and there's no JS on it!
Can someone explain me?
Thanks
h1 {
color: #f35626;
background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 60s infinite linear;
}
@-webkit-keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(360deg);
}
}
for a markup like this
<h1>CHANGE COLOR TEXT</h1>
You can see an example here : http://jsfiddle.net/3oqep26z/
Modify the animation time for faster color changes
My guess is that it would be with CSS3 I found this online
This is css3 features. Will work not everywhere
Set animation in some style:
-webkit-animation-duration: 10s;
Name it
-webkit-animation-name: colours;
And use in the way you need
@-webkit-keyframes colours {
0% {background-color: #39f;}
15% {background-color: #8bc5d1;}
30% {background-color: #f8cb4a;}
45% {background-color: #95b850;}
60% {background-color: #944893;}
75% {background-color: #c71f00;}
90% {background-color: #bdb280;}
100% {background-color: #39f;}
}
Example: http://jsfiddle.net/gk37un0r/