5

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?

1 respuesta 1

7

Utiliza step-end en lugar de linear en el parámetro timing function.

The animation stays in its initial state until the end, at which point it jumps directly to its final state...

TRADUCCIÓN

La animación permanece en su estado inicial hasta el final, en cuyo punto, salta directamente hasta el estado final...

@keyframes cambiaColores {
  0% { color: green; }
  25% { color: red; }
  50% { color: blue; }
  75% { color: orange; }
  100% { color: orange; }
}

#miDiv {
  animation: infinite cambiaColores step-end 10s;
}
<div id="miDiv">Texto que cambia de colores</div>

2
  • 1
    Genial. Es exactamente lo que buscaba. Simple y funcional.
    – Alvaro Montoro
    Commented el 14 nov. 2017 a las 5:50
  • De nada! Si te digo la verdad yo también lo acabo de descubrir! Saludos! Commented el 14 nov. 2017 a las 5:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.