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
Can you explain the difference between animation-duration and animation-delay?
What are some common use cases for different animation-timing-functions?
Can you show how to combine these properties in a single animation?
Awesome!
Completion rate improved to 2.04Definició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!
