Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
🌈 Rainbow Party - css animation snippet 🌈
/* ACTUAL RAINBOW ANIMATION */
@keyframes rainbow-party {
0% {background: linear-gradient(to right, tomato, yellow, lightgreen, cornflowerblue, purple);}
10% {background: linear-gradient(to right, tomato, tomato, yellow, lightgreen, cornflowerblue, purple);}
20% {background: linear-gradient(to right, purple, tomato, yellow, lightgreen, cornflowerblue);}
30% {background: linear-gradient(to right, purple, purple, tomato, yellow, lightgreen, cornflowerblue);}
40% {background: linear-gradient(to right, cornflowerblue, purple, tomato, yellow, lightgreen);}
50% {background: linear-gradient(to right, cornflowerblue, cornflowerblue, purple, tomato, yellow, lightgreen);}
60% {background: linear-gradient(to right, lightgreen, cornflowerblue, purple, tomato, yellow);}
70% {background: linear-gradient(to right, lightgreen, lightgreen, cornflowerblue, purple, tomato, yellow);}
80% {background: linear-gradient(to right, yellow, lightgreen, cornflowerblue, purple, tomato);}
90% {background: linear-gradient(to right, yellow, yellow, lightgreen, cornflowerblue, purple, tomato);}
100% {background: linear-gradient(to right, tomato, yellow, lightgreen, cornflowerblue, purple);}
}
/* APPLY IT TO YOUR STUFF WITH: class="raindbow-party" */
/* OR COPY THIS 'animation' LINE AND APPLY IT TO YOUR STUFF ON HOVER, OR SOMETHING LIKE THAT */
.rainbow-party {
animation: rainbow-party 0.42s linear 0s infinite;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.