Las propiedades de animación en CSS proporcionan un control detallado sobre cómo se ejecutan las animaciones definidas por @keyframes. Estas propiedades permiten ajustar la duración, el retraso, la dirección y otros aspectos clave del comportamiento de la animación.

Propiedades Clave de Animación

1. animation-name

Especifica el nombre de la animación definida por @keyframes que se aplicará al elemento.

css

2. animation-duration

Define la duración total de la animación. El valor puede ser en segundos (s) o milisegundos (ms).

css

3. animation-timing-function

Especifica la curva de velocidad de la animación, determinando cómo la animación avanza a lo largo del tiempo.

• ease: Inicio lento, rápido en el medio y final lento.
• linear: Cambio constante de velocidad.
• ease-in: Inicio lento.
• ease-out: Final lento.
• ease-in-out: Inicio y final lentos.
• cubic-bezier(n,n,n,n): Función personalizada.

css

4. animation-delay

Define el retraso antes de que la animación comience. El valor puede ser en segundos (s) o milisegundos (ms).

css

5. animation-iteration-count

Especifica el número de veces que la animación debe repetirse. Puede ser un número específico o la palabra clave infinite.

css

6. animation-direction

Define la dirección en la que se ejecuta la animación.

• normal: La animación se ejecuta en la dirección normal.
• reverse: La animación se ejecuta en dirección inversa.
• alternate: Alterna entre el sentido normal e inverso cada ciclo.
• alternate-reverse: Comienza en sentido inverso y luego alterna.

css

7. animation-fill-mode

Define cómo se aplican los estilos de la animación antes y después de su ejecución.

• none: Por defecto, los estilos de la animación no se aplican fuera del tiempo de ejecución.
• forwards: Los estilos del último fotograma se mantienen después de la animación.
• backwards: Los estilos del primer fotograma se aplican antes de la animación.
• both: Combina forwards y backwards.

css

8. animation-play-state

Permite pausar y reanudar la animación.

• running: La animación se ejecuta.
• paused: La animación está pausada.

css

Sintaxis Shorthand

CSS permite definir todas las propiedades de animación en una sola declaración utilizando la sintaxis shorthand:

css

Ejemplo:

css

Ejemplo Completo

Vamos a ver un ejemplo que utiliza todas estas propiedades:

html

En este ejemplo, la animación complejo hace que la caja:

1. Se mueva de izquierda a derecha.
2. Cambie de color de azul a rojo y luego a amarillo.
3. Se ejecute durante 4 segundos.
4. Utilice una curva de temporización ease-in-out.
5. Tenga un retraso de 1 segundo antes de comenzar.
6. Se repita infinitamente.
7. Alterne la dirección en cada ciclo.
8. Mantenga los estilos aplicados antes y después de la animación.

[Placeholder para imagen: Ejemplo visual mostrando una caja que se mueve de izquierda a derecha y cambia de color, ilustrando el uso de diferentes propiedades de animación]

Buenas Prácticas

1. Optimiza para el Rendimiento: Utiliza transform y opacity cuando sea posible, ya que son manejados más eficientemente por la GPU.
2. Prueba en Diferentes Dispositivos: Asegúrate de que tus animaciones funcionen bien en todos los navegadores y dispositivos.
3. No Exageres: Las animaciones deben mejorar la UX, no distraer o abrumar al usuario.
4. Utiliza Herramientas de Desarrollo: Depura y afina tus animaciones utilizando herramientas de desarrollo del navegador.

Dominando estas propiedades de animación, puedes crear efectos visuales que no solo sean atractivos, sino también significativos y útiles para la interacción del usuario. En la próxima sección, exploraremos cómo combinar estas propiedades para crear animaciones complejas y atractivas.