May I ask, how did you do it?
Replies
On the quest-a-thon bar, it's green but when you tap it--it shifts colors, that's really cool! Is there a sharable code for that?
Or should I just enjoy it till it's gone?
Thanks for reading :3
using your browser's "inspect element" feature, you can see that they've created an animation called "rainbow" with the following CSS:
rainbow {
0%, 100% {background-color: }
17% {background-color: }
33% {background-color: }
50% {background-color: }
67% {background-color: }
83% {background-color: }
}
and then applied that animation to the bar's hover state like so:
.ui.progress:hover .bar.finished {
animation-name: rainbow;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-timing-function: linear;
-webkit-animation-name: rainbow;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: linear;
}
CSS animations are pretty cool and there are lots of possibilities with them. you can learn more here (and also by just googling "CSS animation").
