Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Definición de la Duración y Temporización de Animaciones | Animaciones Avanzadas en CSS
Técnicas Avanzadas de CSS

bookDefinició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.html

index.css

index.css

copy

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.html

index.css

index.css

copy

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.html

index.css

index.css

copy
question mark

Podemos especificar el tiempo de retraso para que la animación comience, el tiempo durante el cual la animación se ejecutará y también el progreso de la animación a lo largo del tiempo.

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 2

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Awesome!

Completion rate improved to 2.04

bookDefinició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.html

index.css

index.css

copy

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.html

index.css

index.css

copy

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.html

index.css

index.css

copy
question mark

Podemos especificar el tiempo de retraso para que la animación comience, el tiempo durante el cual la animación se ejecutará y también el progreso de la animación a lo largo del tiempo.

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 2
some-alt