Recomendaciones de curso:

Función CSS steps()

Definición y uso de CSS steps() La función se utiliza para crear funciones de temporización por pasos para la animación.

Esta función divide la duración de la animación en intervalos iguales de longitud especificados (n). Por ejemplo: si n es 4, la animación se dividirá en 4 partes. Se dividirá el tiempo del 0% al 100% en 4 partes; respectivamente, 0%-25%, 25%-50%, 50%-75% y 75%-100%

Ejemplo

Crea diferentes funciones de temporización por pasos para la animación:

div.a {
  animation: mymove 5s steps(4, end);
}
div.b {
  animation: mymove 5s steps(6, jump-start);
}
div.c {
  animation: mymove 5s steps(4, jump-none);
}
div.d {
  animation: mymove 5s steps(4, jump-both);
}

Prueba por ti mismo

Sintaxis CSS

steps(n, step-position)
Valor Descripción
n Obligatorio. Especifica el número de pasos/intervalos.
step-position

Opcional. Especifica el tiempo en que ocurre el salto entre valores. Utiliza uno de los siguientes términos clave:

  • jump-start o start: ocurre el primer paso al comenzar la animación
  • jump-end o end: ocurre el último paso al final de la animación. end es el valor predeterminado
  • jump-none: no ocurre salto anticipado ni salto retrasado
  • jump-both: ocurre un salto anticipado y un salto retrasado al mismo tiempo

Detalles técnicos

Versión: CSS Easing Functions Level 1

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite completamente la función por primera vez.

Chrome Edge Firefox Safari Opera
77 79 65 14 64

Páginas relacionadas

Referencia:Atributo animation CSS

Referencia:Atributo animation-timing-function CSS