Puedes valerte de la opción de animaciones de CSS3, que se configura con la propiedad animation
y sus sub-propiedades en combinación con la regla @keyframes que controla los pasos de una animación.
Por ejemplo, puedes hacer una transición entre dos colores con keyframes from
/to
y hacer que se repita infinitamente con la sub-propiedad animation-iteration-count
Por ejemplo:
button {
background-color: red;
animation-name: ejemplo;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes ejemplo {
from {background-color: red;}
to {background-color: yellow;}
}
<button>Botón de ejemplo</button>
También puedes hacer que cicle entre varios colores con keyframes que se van aplicando cuando ha transcurrido una fracción del tiempo de la animación, así:
button {
background-color: red;
animation: 3s multicolor;
animation-iteration-count: infinite;
}
@keyframes multicolor {
0% {background-color: #000;}
33% {background-color: #FF0000;}
66% {background-color: #0000FF;}
100% {background-color: #FFF;}
}
<button>Botón de ejemplo</button>