Cycle through any number of stops, tune duration and property, and copy production-ready CSS. No JavaScript needed.
@keyframes colorcycle {
0% { background: #7c5cff; }
25% { background: #00d4ff; }
50% { background: #ff7ad9; }
75% { background: #ffd166; }
100% { background: #7c5cff; }
}
.animated {
animation: colorcycle 6s ease-in-out infinite;
}.swap {
transition: background 6s ease-in-out;
}
.swap:hover {
background: #ffd166;
}