Quiero crear una animación en un texto para que cambie de color varias veces (p.e. 4 veces en cada rotación: primero verde, luego rojo, luego azul, y finalmente naranja). Para eso estoy usando animaciones con @keyframes
, pero me encuentro con un problema: la animación es de forma progresiva y yo quiero que el cambio de color ocurra de golpe:
@keyframes cambiaColores {
0% { color: green; }
25% { color: red; }
50% { color: blue; }
75% { color: orange; }
100% { color: orange; }
}
#miDiv {
animation: infinite cambiaColores linear 10s;
}
<div id="miDiv">Texto que cambia de colores</div>
Pensé en poner porcentajes duplicados (0% -> verde, 25% -> verde, 25% -> rojo...), pero no funciona porque parece que si hay más de un porcentaje igual, ignora el primero y sólo ejecuta el último. Esto lo puedo solucionar poniendo decimales:
@keyframes cambiaColores {
0% { color: green; }
24.999% { color: green; }
25% { color: red; }
49.999% { color: red; }
50% { color: blue; }
74.999% { color: blue; }
75% { color: orange; }
100% { color: orange; }
}
#miDiv {
animation: infinite cambiaColores linear 10s;
}
<div id="miDiv">Texto que cambia de colores</div>
Pero parece un poco engorroso, especialmente cuando la animación require más de sólo 4 cambios. ¿Existe alguna manera de decirle al navegador que cada paso de la animación debe hacerlo de golpe en lugar de de manera progresiva?