La regla @keyframes en CSS permite definir animaciones detalladas mediante la especificación de los estilos que deben aplicarse en distintos puntos clave de la animación. Comprender la sintaxis de @keyframes es fundamental para crear animaciones precisas y personalizadas.

Definición de @keyframes

La regla @keyframes se utiliza para definir una secuencia de estilos que deben aplicarse a lo largo del tiempo. La sintaxis básica consiste en un nombre para la animación y una serie de bloques de estilo asociados con los porcentajes de progreso de la animación.

Sintaxis Básica

css

Uso de Porcentajes

Es posible definir puntos intermedios en la animación especificando porcentajes:

css

Propiedades de Animación

Estas son las propiedades principales utilizadas junto con @keyframes para controlar cómo se ejecutan las animaciones:

1. animation-name: El nombre de la animación definida por @keyframes.

   css
   

2. animation-duration: La duración total de la animación.

   css
   

3. animation-timing-function: Describe cómo se distribuye la velocidad de la animación a lo largo de su duración.

   css
   

4. animation-delay: Define el retraso antes de que comience la animación.

   css
   

5. animation-iteration-count: El número de veces que la animación debe repetirse.

   css
   

6. animation-direction: Define la dirección en la que se ejecuta la animación.

   css
   

7. animation-fill-mode: Define cómo se aplican los estilos de la animación antes y después de su ejecución.

   css
   

8. animation-play-state: Permite pausar y reanudar la animación.

   css
   

Ejemplo Detallado con @keyframes

Vamos a crear una animación compleja que combina varias propiedades:

html

En este ejemplo, la animación cambioComplejo hace que el elemento .box cambie de color, se mueva a lo largo del eje X, se escale, rote y cambie de opacidad a lo largo de 5 segundos, repitiéndose indefinidamente.

Controlando la Dirección y el Punto de Inicio de la Animación

La propiedad animation-direction controla la dirección en la que se ejecuta la animación, y animation-fill-mode define cómo se aplican los estilos antes y después de la animación.

Dirección de Animación (animation-direction)

• normal: La animación se ejecuta en la dirección normal.
• reverse: La animación se ejecuta en la dirección inversa.
• alternate: Alterna entre el sentido normal e inverso.
• alternate-reverse: Alterna empezando en el sentido inverso.

css

Modo de Relleno (animation-fill-mode)

• 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

Pausar y Reanudar Animaciones

La propiedad animation-play-state permite pausar y reanudar las animaciones.

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

css

[Placeholder para imagen: Ejemplo visual mostrando una caja que cambia de color, se mueve, rota, escala y cambia de opacidad en varias etapas, ilustrando el uso de @keyframes y otras propiedades de animación]

Buenas Prácticas

1. Divide y Vencerás: Para animaciones complejas, divide los cambios en varios keyframes para un control más granular.
2. Revisa el Rendimiento: Las animaciones complejas pueden afectar el rendimiento. Prueba en diferentes dispositivos.
3. Usa Herramientas de Desarrollo: Utiliza herramientas de desarrollo en navegadores para depurar y ajustar tus animaciones.

Con la comprensión detallada de la sintaxis de @keyframes, puedes crear animaciones complejas y altamente personalizadas que realzan significativamente la interactividad y el atractivo visual de tus proyectos web. En la próxima sección, exploraremos en detalle las propiedades de animación para afinar aún más tus habilidades.