Definición de la Duración y Temporización de Animaciones
Consideración de todas las formas posibles de trabajar con el tiempo de animación.
Propiedad animation-duration
animation-duration
define el tiempo necesario para que una animación complete un ciclo (cambio del estado inicial al final), medido en segundos (s
) o milisegundos (ms
).
animation-duration: 3s | 3000ms
Ejecutemos el siguiente ejemplo y pasemos el cursor sobre la caja:
index.html
index.css
Propiedad animation-timing-function
animation-timing-function
determina cómo progresa la animación a lo largo del tiempo, controlando la aceleración y desaceleración de la animación. La propiedad animation-timing-function
puede tener los mismos valores que la propiedad transition-timing-function
. Hay varias funciones de temporización predefinidas disponibles, como linear
, ease
y ease-in-out
, o se puede definir una curva personalizada de Bézier cúbica usando la función cubic-bezier()
.
animation-timing-function: time_function
Apliquemos diferentes time_functions a las cajas en el ejemplo:
index.html
index.css
Propiedad animation-delay
animation-delay
establece el tiempo que debe transcurrir antes de que comience la animación. Puede especificarse en segundos (s
) o milisegundos (ms
).
animation-delay: 0.1s | 100ms
Apliquemos diferentes retardos a los cuadros en el ejemplo:
index.html
index.css
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 2.04
Definición de la Duración y Temporización de Animaciones
Desliza para mostrar el menú
Consideración de todas las formas posibles de trabajar con el tiempo de animación.
Propiedad animation-duration
animation-duration
define el tiempo necesario para que una animación complete un ciclo (cambio del estado inicial al final), medido en segundos (s
) o milisegundos (ms
).
animation-duration: 3s | 3000ms
Ejecutemos el siguiente ejemplo y pasemos el cursor sobre la caja:
index.html
index.css
Propiedad animation-timing-function
animation-timing-function
determina cómo progresa la animación a lo largo del tiempo, controlando la aceleración y desaceleración de la animación. La propiedad animation-timing-function
puede tener los mismos valores que la propiedad transition-timing-function
. Hay varias funciones de temporización predefinidas disponibles, como linear
, ease
y ease-in-out
, o se puede definir una curva personalizada de Bézier cúbica usando la función cubic-bezier()
.
animation-timing-function: time_function
Apliquemos diferentes time_functions a las cajas en el ejemplo:
index.html
index.css
Propiedad animation-delay
animation-delay
establece el tiempo que debe transcurrir antes de que comience la animación. Puede especificarse en segundos (s
) o milisegundos (ms
).
animation-delay: 0.1s | 100ms
Apliquemos diferentes retardos a los cuadros en el ejemplo:
index.html
index.css
¡Gracias por tus comentarios!