Animaciones CSS: ¿Qué son y como hacerlas? Guía completa.

Las animaciones en CSS son una poderosa herramienta para dar vida a tu página web, haciendo que elementos como texto, imágenes y botones cobren movimiento. En este artículo, aprenderás qué es una animación, cómo hacer diferentes tipos de animaciones con ejemplos prácticos, y descubrirás generadores de animaciones gratis para facilitar tu trabajo.

1. ¿Qué son las animaciones en CSS?

Las animaciones en CSS consisten en una serie de cambios de estilo que se aplican a un elemento HTML en un período de tiempo específico. Estas pueden incluir cambios en propiedades como el color, el tamaño, la posición y la opacidad, entre otras.

Se utilizan para mejorar la interacción del usuario, hacer que el contenido sea más atractivo y proporcionar una experiencia más dinámica y agradable.

1.1. Ejemplo sencillo para entender como funcionan las animaciones en CSS:

Supongamos que tenemos un cuadro en una página web y queremos que el mismo se mueva de izquierda a derecha de manera constante. Para ellos hacemos lo siguiente:

Primero introducimos la estructura HTML para luego con las propiedades CSS correctas hacerlo un cuadro (luego en el CSS se le da altura y ancho al div para asemejar un cuadro) :

  <div class="box"></div>Lenguaje del código: HTML, XML (xml)

Y con los siguientes estilos CSS creamos la animación de movimiento:

@keyframes slide {
  0% { transform: translateX(0); }
  50% { transform: translateX(50px); }
  100% { transform: translateX(0); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: slide;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}Lenguaje del código: CSS (css)

Resultado visual:

En este ejemplo, se define una animación llamada slide (con un @keyframes y sus porcentajes y propiedades) que mueve una caja roja de izquierda a derecha y de vuelta a su posición original.

• La animación dura 4 segundos (con animation-duration: 4s;)
• Utiliza una función de temporización ease-in-out (con animation-timing-function: ease-in-out;)
• Y se repite infinitamente (con animation-iteration-count: infinite;)

1.2. ¿Cuál es la diferencia entre una animación CSS y una transición CSS?

Descubre todo sobre las transiciones en CSS.

Característica	Animaciones	Transiciones
Objetivo	Su objetivo principal es crear movimientos complejos y efectos visuales llamativos. Permiten transformar un elemento de un estado a otro de forma gradual o abrupta, con control total sobre la trayectoria, la velocidad y la temporización.	Su objetivo principal es crear cambios suaves y fluidos en las propiedades CSS de un elemento al interactuar con él, como al pasar el cursor sobre él o hacer clic en él. Son más simples y se enfocan en transiciones entre dos estados.
Estructura	Se definen utilizando la regla @keyframes, donde se especifican los keyframes (fotogramas clave) que marcan los estados de la animación y los valores de las propiedades CSS para cada keyframe.	Se definen utilizando la propiedad transition, donde se indican las propiedades CSS que se animarán, la duración de la transición, la función de temporización y otras opciones.
Control	Ofrecen un mayor control sobre el movimiento y la temporización de la animación. Puedes definir trayectorias complejas, utilizar funciones de temporización personalizadas y controlar la reproducción (inicio, pausa, reinicio) con JavaScript.	Ofrecen un control más limitado. La trayectoria es lineal, las funciones de temporización predefinidas son más básicas y la reproducción automática depende de la interacción del usuario.
Aplicación	Se aplican a elementos HTML utilizando la propiedad animation-name y se pueden activar manualmente con JavaScript o mediante eventos como el scroll o la carga de la página.	Se aplican a elementos HTML utilizando la propiedad transition y se activan automáticamente al producirse la interacción especificada (por ejemplo, hover o click).
Ejemplos	Hacer que un elemento rote 360 grados sobre sí mismo durante 2 segundos de forma fluida.	Cambiar el color de fondo de un botón a azul cuando el usuario pasa el cursor sobre él.

1.3. Algunos ejemplos de animaciones CSS que puedes crear son:

• Hacer que un elemento aparezca o desaparezca gradualmente.
• Cambiar el color de un elemento de forma fluida.
• Mover un elemento a lo largo de una trayectoria o posición específica.
• Agrandar, disminuir o rotar un elemento.
• Crear efectos de pulsación o rebote.
• Animar menús desplegables o transiciones entre páginas.

2. Componentes claves para crear animaciones en CSS.

A continuación iremos explicando cada unos de los componentes claves para crear estas animaciones y en el siguiente punto 3 explicaremos paso a paso como usarlos.

2.1. Keyframes.

Los keyframes en CSS definen los estados intermedios de una animación, especificando cómo deben cambiar las propiedades del elemento a lo largo del tiempo.

Se utiliza la regla @keyframes para declarar una serie de estilos que el navegador aplicará en momentos específicos durante la duración de la animación.

2.1.1. ¿Cómo se usan estos keyframes?

La estructura básica para usarlos es la siguiente:

@keyframes nombre-animacion {
  porcentaje {
    propiedad1: valor1;
    propiedad2: valor2;
    ...
  }
  ...
}

Componentes de la estructura:

1. nombre-animacion:
   • Es el nombre único que se le da a la animación. Este nombre se utiliza para referenciar la animación desde los elementos HTML que deseas animar.
   • Utiliza la propiedad animation-name (dentro del selector CSS que hayas elegido) para referenciar la regla @keyframes que has creado.
2. porcentaje:
   • Representa un punto específico en el tiempo de la animación. Se puede especificar de la siguiente manera:
     • Uso de from y to: Son equivalentes a usar 0% y 100% respectivamente.
     • Uso de porcentaje que van desde 0% (inicio de la animación) hasta 100% (final de la animación). También puedes usar valores como 25%, 50% o 75% para definir estados intermedios.
3. propiedad1, propiedad2, etc.:
   • Son las propiedades CSS que deseas animar. Cada propiedad se establece con un valor específico que define el estado deseado en ese punto de la animación.

2.1.2. Uso de keyframes con from y to:

Las palabras clave from y to son equivalentes a usar 0% y 100% respectivamente. Se utilizan para definir los estilos iniciales y finales de la animación.

Por ejemplo:

@keyframes example {
  from { background-color: red; left: 0; }
  to { background-color: yellow; left: 100px; }
}Lenguaje del código: CSS (css)

En este ejemplo:

• from (equivalente a 0%): El color de fondo es rojo y la posición izquierda es 0.
• to (equivalente a 100%): El color de fondo cambia a amarillo y la posición izquierda a 100px.

2.1.3. Uso de porcentajes en los Keyframes:

Para crear animaciones más complejas con múltiples etapas intermedias, puedes usar porcentajes para especificar los estilos en varios puntos durante la animación.

Por ejemplo:

@keyframes example {
  0% { background-color: red; left: 0; }
  50% { background-color: yellow; left: 50px; }
  100% { background-color: green; left: 100px; }
}Lenguaje del código: CSS (css)

En este ejemplo:

• 0%: El color de fondo es rojo y la posición izquierda es 0.
• 50%: A la mitad de la animación, el color de fondo es amarillo y la posición izquierda es 50px.
• 100%: Al final de la animación, el color de fondo es verde y la posición izquierda es 100px.

Puedes definir tantos porcentajes como necesites para crear la animación deseada. Los valores de porcentaje indican el progreso de la animación desde el inicio (0%) hasta el final (100%).

2.1.4. Propiedades comunes que puedo usar en los Keyframes:

1. Propiedades de transformación:

• transform: translateX(): Mueve un elemento horizontalmente.
• transform: translateY(): Mueve un elemento verticalmente.
• transform: rotate(): Rota un elemento alrededor de su centro.
• transform: scale(): Cambia la escala de un elemento.
• transform: skew(): Inclina un elemento.

2. Propiedades de color:

• background-color: Cambia el color de fondo de un elemento.
• color: Cambia el color del texto de un elemento.
• fill: Cambia el color de relleno de una forma o trazo.

3. Propiedades de opacidad:

• opacity: Cambia la transparencia de un elemento.

4. Propiedades de visibilidad:

• visibility: Controla si un elemento es visible u oculto.

5. Propiedades de tamaño y posición:

• width: Cambia el ancho de un elemento.
• height: Cambia la altura de un elemento.
• left: Cambia la posición horizontal de un elemento.
• top: Cambia la posición vertical de un elemento.

6. Propiedades de sombras:

• box-shadow: Añade una sombra a un elemento.

7. Propiedades de borde:

• border-width: Cambia el ancho del borde de un elemento.
• border-color: Cambia el color del borde de un elemento.
• border-radius: Añade redondez a las esquinas de un elemento.

Recuerda que puedes combinar estas propiedades para crear animaciones complejas y creativas.

2.2. Propiedades para generar animaciones:

A continuación ampliamos sobre cada una de las propiedades de animación en CSS para entender cómo funcionan y cómo se utilizan:

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

2.2.1. animation-name

La propiedad animation-name es una de las principales propiedades para aplicar animaciones CSS a elementos HTML. Su función principal es referenciar (en el elemento HTML) la animación que has definido previamente utilizando la regla @keyframes.

SINTAXIS:

selector {
  animation-name: nombre-animacion;
  /* Otras propiedades de animación */
}Lenguaje del código: CSS (css)

Explicación:

• selector: Es el selector CSS que define a los elementos HTML a los que se aplicará la animación.
• nombre-animacion: Es el nombre exacto que le has dado a la animación en la regla @keyframes.

¿Cómo usar la propiedad animation-name? EJEMPLO:

Supongamos que has definido la siguiente animación con @keyframes:

@keyframes mi-animacion {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  50% {
    transform: translateX(100px);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 0;
  }
}Lenguaje del código: CSS (css)

Para aplicar esta animación a un elemento HTML con la clase .elemento, utilizarías la siguiente regla CSS:

.elemento {
  animation-name: mi-animacion; 
  animation-duration: 2s; 
  animation-fill-mode: forwards; 
}Lenguaje del código: CSS (css)

En este ejemplo:

• Primero usamos un @keyframes con el nombre mi-animacion.
• Luego aplicamos ese nombre en el selector CSS, usando la propiedad animation-name: mi-animacion;

Consideraciones importantes al usar la propiedad Animation-Name:

• Nombre único: El nombre de la animación en @keyframes y en animation-name debe ser exactamente el mismo.
• Orden: La propiedad animation-name debe ir antes que otras propiedades de animación como animation-duration, animation-delay, etc.
• Combinaciones: Puedes aplicar varias animaciones a un mismo elemento separando los nombres con comas: animation-name: animacion1, animacion2;.

RESUMEN DE Animation-Name:

animation-name es la propiedad esencial para conectar un elemento HTML con la animación definida en @keyframes. Esta propiedad permite dar vida a tus elementos web con movimientos dinámicos y efectos visuales atractivos.

2.2.2. animation-duration

La propiedad animation-duration en CSS define la duración total que tarda en completarse un ciclo de la animación. Es decir, determina cuánto tiempo toma la animación para recorrer todos los keyframes definidos en la regla @keyframes.

SINTAXIS:

selector {
  animation-duration: valor; /* Duración de la animación */
  /* Otras propiedades de animación */
}Lenguaje del código: CSS (css)

Explicación:

• selector: Es el selector CSS que define a los elementos HTML a los que se aplicará la animación.
• valor: Es el valor que indica la duración de la animación. Puede especificarse en segundos (s) o milisegundos (ms). Si no se especifica la unidad, se considerarán segundos por defecto.

¿Cómo usar la propiedad animation-duration? EJEMPLO:

Si deseas que una animación dure 2 segundos, utilizarías la siguiente regla CSS:

.animado {
  animation-name: mi-animacion;
  animation-duration: 2s; 
  animation-fill-mode: forwards; 
}Lenguaje del código: CSS (css)

En este ejemplo, y dentro del selector CSS, y debajo de animation-name: mi-animacion; se usa esta propiedad animation-duration: 2s; para definir una duración total de la animación de 2 segundos.

Consideraciones importantes al usar la propiedad animation-duration:

• Valor mínimo: La duración de la animación no puede ser un valor negativo.
• Efecto en la velocidad: Cuanto mayor sea el valor de animation-duration, más lenta será la animación.
• Relación con otras propiedades: La propiedad animation-duration se relaciona con otras propiedades de animación como animation-delay y animation-iteration-count para controlar el comportamiento completo de la animación.

RESUMEN DE animation-duration::

animation-duration es una propiedad fundamental para ajustar la velocidad y el ritmo de tus animaciones CSS. Te permite controlar el tiempo que tardan los elementos en realizar los movimientos y efectos deseados.

2.2.3. animation-timing-function

La propiedad animation-timing-function en CSS controla la velocidad de la animación a lo largo de su duración. Define cómo cambia la velocidad de la animación en diferentes momentos del ciclo, permitiendo crear efectos de aceleración, desaceleración o movimiento uniforme.

SINTAXIS:

selector {
  animation-timing-function: valor; /* Función de temporización */
  /* Otras propiedades de animación */
}Lenguaje del código: CSS (css)

Explicación:

• selector: Es el selector CSS que define a los elementos HTML a los que se aplicará la animación.
• valor: Es el valor que indica la función de temporización que se utilizará. Puede ser:
  • Palabras clave predefinidas: ease, linear, ease-in, ease-out, ease-in-out, steps(n, end), cubic-bezier(x1, y1, x2, y2).
  • Función personalizada: Utilizando la notación cubic-bezier() con valores numéricos entre 0 y 1.

¿Cómo usar la propiedad animation-timing-function? EJEMPLO:

Para su uso, primero debemos introducir esta propiedades en el selector CSS que hayamos definido y luego se aplica utilizando uno de estos dos valores posibles (como vimos en la explicamos de la sintaxis):

1. Palabras clave predefinidas:
   • ease, linear, ease-in, ease-out, ease-in-out, steps(n, end), cubic-bezier(x1, y1, x2, y2).
2. Función personalizada cubic-bezier():
   • Utilizando la notación cubic-bezier() con valores numéricos entre 0 y 1.

1- Uso con palabras clave predefinidas:

Se puede usar una de las palabras claves o valores:

• ease: Aceleración al principio, desaceleración al final, movimiento suave.
• linear: Velocidad constante durante toda la animación, movimiento uniforme.
• ease-in: Aceleración gradual desde el inicio hasta la mitad de la animación.
• ease-out: Desaceleración gradual desde la mitad de la animación hasta el final.
• ease-in-out: Combina ease-in y ease-out, con aceleración al principio y desaceleración al final.
• steps(n, end): Animación por pasos, con n saltos bruscos y end indicando dónde termina cada paso («start» por defecto).

EJEMPLO USANDO PALABRAS CLAVES PREDEFINIDAS:

Para que una animación se acelere al principio y luego se desacelere al final, utilizamos la siguiente regla CSS:

.animado {
  animation-name: mi-animacion;
  animation-duration: 2s;
  animation-timing-function: ease-in-out; 
  animation-fill-mode: forwards; 
}Lenguaje del código: CSS (css)

Dentro del selector CSS, se usa la propiedad animation-timing-function: ease-in-out; para especificar una aceleración al principio y desaceleración al final.

2- Uso con la función personalizada – cubic-bezier():

La función cubic-bezier() define una curva de Bézier cúbica que determina la progresión de una animación en el tiempo. Los valores de la función son cuatro números, todos entre 0 y 1, que representan dos puntos de control en un espacio de coordenadas.

SINTAXIS DE cubic-bezier():

transition-timing-function: cubic-bezier(x1, y1, x2, y2);Lenguaje del código: PHP (php)

Explicación de la sintaxis:

• x1 y x2 son las coordenadas horizontales de los puntos de control.
• y1 y y2 son las coordenadas verticales de los puntos de control.

EJEMPLO USANDO LA FUNCIÓN PERSONALIZADA – cubic-bezier():

.animado {
     animation-name: mi-animacion;
     transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
{Lenguaje del código: JavaScript (javascript)

En este ejemplo, la función cubic-bezier(0.25, 0.1, 0.25, 1) define una curva de aceleración personalizada:

• Comienza con una aceleración relativamente lenta ( 0.25, 0.1).
• Aumenta gradualmente la velocidad ( 0.25).
• Termina con una desaceleración suave hacia el estado final ( 1).

EJEMPLO DE COMPORTAMIENTOS COMUNES DE cubic-bezier():

Aquí hay algunos valores de cubic-bezier() comunes y sus efectos:

1. ease: cubic-bezier(0.25, 0.1, 0.25, 1)
   • Aceleración inicial lenta y desaceleración suave.
2. linear: cubic-bezier(0, 0, 1, 1)
   • Progresión constante, sin aceleración ni desaceleración.
3. ease-in: cubic-bezier(0.42, 0, 1, 1)
   • Aceleración rápida al principio, luego constante.
4. ease-out: cubic-bezier(0, 0, 0.58, 1)
   • Progresión constante al principio, luego desaceleración suave.
5. ease-in-out: cubic-bezier(0.42, 0, 0.58, 1)
   • Aceleración rápida al principio y desaceleración suave al final.

Consideraciones importantes al usar animation-timing-function:

• Compatibilidad: Algunas funciones de temporización no son compatibles con todos los navegadores. Consulta la tabla de compatibilidad antes de usarlas.
• Efectos combinados: Puedes combinar diferentes funciones de temporización para crear efectos complejos.
• Curvas personalizadas: La función cubic-bezier() te da un control preciso sobre la velocidad de la animación en cada punto.

RESUMEN DE animation-timing-function:

animation-timing-function es una herramienta poderosa para dar vida a tus animaciones CSS y crear movimientos con diferentes ritmos y sensaciones. Te permite controlar la velocidad, la aceleración y la desaceleración de la animación para lograr efectos visuales únicos y atractivos.

2.2.4. animation-delay

La propiedad animation-delay en CSS define un retraso en el inicio de una animación. Es decir, determina cuánto tiempo espera un elemento antes de comenzar a ejecutar la secuencia de keyframes definida en la regla @keyframes.

SINTAXIS:

selector {
  animation-delay: valor; /* Retraso de la animación */
  /* Otras propiedades de animación */
}Lenguaje del código: CSS (css)

Explicación:

• selector: Es el selector CSS que define a los elementos HTML a los que se aplicará la animación.
• valor: Es el valor que indica el retraso de la animación. Puede especificarse en segundos (s) o milisegundos (ms). Si no se especifica la unidad, se considerarán segundos por defecto.

¿Cómo usar la propiedad animation-delay? EJEMPLO:

Si deseas que una animación comience 1 segundo después de que se aplica al elemento, utilizarías la siguiente regla CSS:

.animado {
  animation-name: mi-animacion;
  animation-duration: 2s;
  animation-delay: 1s; 
  animation-fill-mode: forwards; 
}Lenguaje del código: CSS (css)

En este ejemplo, la propiedad animation-delay: 1s; provoca un retraso de 1 segundo antes de comenzar la animación.

Consideraciones importantes al usar animation-delay:

• Valor mínimo: El retraso de la animación no puede ser un valor negativo.
• Efecto en el inicio: El valor de animation-delay no afecta la duración de la animación en sí, solo el momento en que comienza.
• Relación con otras propiedades: La propiedad animation-delay se relaciona con otras propiedades de animación como animation-duration y animation-iteration-count para controlar el comportamiento completo de la animación.

RESUMEN DE animation-delay:

animation-delay es una propiedad útil para sincronizar animaciones o crear efectos de aparición retardada en tus elementos HTML. Te permite controlar el momento exacto en que la animación cobra vida, agregando un toque de control y dinamismo a tus diseños web.

2.2.5. animation-iteration-count

La propiedad animation-iteration-count en CSS controla la cantidad de veces que se repite un ciclo de animación completo. Define cuántas veces se ejecutará la secuencia de keyframes definida en la regla @keyframes.

SINTAXIS:

selector {
  animation-iteration-count: valor; /* Número de repeticiones */
  /* Otras propiedades de animación */
}Lenguaje del código: CSS (css)

Explicación:

• selector: Es el selector CSS que define a los elementos HTML a los que se aplicará la animación.
• valor: Es el valor que indica cuántas veces se repetirá la animación. Puede ser:
  • Número entero: Indica la cantidad exacta de repeticiones. Por ejemplo, 2 significa que la animación se repetirá dos veces.
  • infinite: La animación se repetirá indefinidamente, en bucle, hasta que se detenga manualmente.

¿Cómo usar la propiedad animation-iteration-count? EJEMPLO:

Para que una animación se repita 3 veces, utilizarías la siguiente regla CSS:

.animado {
  animation-name: mi-animacion;
  animation-duration: 2s;
  animation-iteration-count: 3; 
  animation-fill-mode: forwards; 
}Lenguaje del código: CSS (css)

En este ejemplo, animation-iteration-count: 3; provoca 3 repeticiones de la animación.

Consideraciones importantes al usar animation-iteration-count:

• Valor por defecto: Si no se especifica animation-iteration-count, el valor por defecto es 1, lo que significa que la animación se repetirá una sola vez.
• Repetición infinita: El valor infinite permite que la animación se ejecute continuamente hasta que se detenga manualmente con JavaScript o se elimine la regla CSS.
• Valores decimales: Aunque no es un uso común, puedes especificar valores decimales para que la animación se ejecute una fracción de un ciclo. Por ejemplo, 0.5 significa que la animación se ejecutará hasta la mitad del ciclo.

RESUMEN DE animation-iteration-count:

animation-iteration-count es una propiedad fundamental para controlar la duración de tus animaciones CSS. Te permite definir cuántas veces quieres que se repita un ciclo de animación, creando efectos repetitivos o continuos según tus necesidades.

2.2.6. animation-direction

La propiedad animation-direction en CSS define la dirección en la que se ejecuta la animación. Controla cómo se reproduce la secuencia de keyframes definida en la regla @keyframes, determinando si la animación se repite hacia adelante, hacia atrás, en modo alternativo o en una combinación de estas direcciones.

SINTAXIS:

selector {
  animation-direction: valor; /* Dirección de la animación */
  /* Otras propiedades de animación */
}Lenguaje del código: CSS (css)

Explicación:

• selector: Es el selector CSS que define a los elementos HTML a los que se aplicará la animación.
• valor: Es el valor que indica la dirección de la animación. Los valores posibles son:
  • normal: La animación se reproduce hacia adelante una vez y luego se detiene. Este es el valor por defecto.
  • reverse: La animación se reproduce hacia atrás una vez y luego se detiene.
  • alternate: La animación se reproduce hacia adelante y luego hacia atrás, alternando entre ambas direcciones.
  • alternate-reverse: La animación se reproduce hacia adelante, luego hacia atrás, y luego repite este ciclo de forma alterna.

¿Cómo usar la propiedad animation-direction? EJEMPLO:

Para que una animación se reproduzca hacia adelante y luego hacia atrás, utilizarías la siguiente regla CSS:

.animado {
  animation-name: mi-animacion;
  animation-duration: 2s;
  animation-direction: alternate; 
  animation-fill-mode: forwards; 
}Lenguaje del código: CSS (css)

En este ejemplo, la propiedad animation-direction: alternate; provoca que la animación se reproduzca hacia adelante y luego hacia atrás.

Consideraciones importantes al usar animation-direction:

• Efecto en la repetición: La propiedad animation-direction no afecta la cantidad de veces que se repite la animación. Esto se controla con la propiedad animation-iteration-count.
• Combinación con otras propiedades: animation-direction se puede combinar con otras propiedades de animación como animation-delay y animation-timing-function para crear efectos complejos.
• Soporte del navegador: Algunos valores de animation-direction no son compatibles con todos los navegadores. Consulta la tabla de compatibilidad antes de usarlos.

RESUMEN DE animation-direction:

animation-direction es una propiedad versátil para dar más dinamismo y variedad a tus animaciones CSS. Te permite controlar la dirección en la que se reproduce la secuencia de keyframes, creando efectos de vaivén, alternancia o reproducción en bucle inverso.

2.2.7. animation-fill-mode

La propiedad animation-fill-mode en CSS controla el estado de los estilos de la animación antes y después de que se ejecute la animación. Define cómo se ven los elementos cuando la animación no está activa, ya sea conservando los estilos finales de la animación o volviendo a los estilos previos a la animación.

SINTAXIS:

selector {
  animation-fill-mode: valor; /* Modo de relleno de la animación */
  /* Otras propiedades de animación */
}Lenguaje del código: CSS (css)

Explicación:

• selector: Es el selector CSS que define a los elementos HTML a los que se aplicará la animación.
• valor: Es el valor que indica el modo de relleno de la animación. Los valores posibles son:
  • none: Los estilos de la animación no se aplican ni antes ni después de la ejecución. El elemento vuelve a su estado original antes de la animación. Este es el valor por defecto.
  • forwards: Los estilos finales de la animación se mantienen después de que la animación se completa. El elemento permanece en el estado final de la animación.
  • backwards: Los estilos iniciales de la animación se restauran antes de que la animación comience. El elemento vuelve a su estado original antes de la animación.
  • both: Los estilos finales de la animación se mantienen después de que la animación se completa y durante su reproducción. El elemento permanece en el estado final de la animación mientras la animación está activa.

¿Cómo usar la propiedad animation-fill-mode? EJEMPLO:

Para que un elemento conserve el color rojo después de que finalice una animación de cambio de color, utilizarías la siguiente regla CSS:

.animado {
  animation-name: cambio-color;
  animation-duration: 2s;
  animation-fill-mode: forwards; 
}

@keyframes cambio-color {
  0% {
    color: blue;
  }
  de
}Lenguaje del código: CSS (css)

En este ejemplo, animation-fill-mode: forwards; mantiene el color rojo final (definido en el keyframe) cuando finaliza la animación.

Consideraciones importantes al usar animation-fill-mode:

• Efecto en la apariencia: La propiedad animation-fill-mode afecta principalmente la apariencia del elemento cuando la animación no está activa.
• Combinación con otras propiedades: animation-fill-mode se puede combinar con otras propiedades de animación como animation-name, animation-duration y animation-direction para crear efectos complejos.
• Soporte del navegador: Algunos valores de animation-fill-mode no son compatibles con todos los navegadores. Consulta la tabla de compatibilidad antes de usarlos.

RESUMEN DE animation-fill-mode:

animation-fill-mode es una propiedad útil para controlar el estado visual de tus elementos HTML durante y después de las animaciones CSS. Te permite decidir si los estilos de la animación deben permanecer visibles una vez finalizada la secuencia, o si el elemento debe volver a su estado original.

2.2.8. animation-play-state

La propiedad animation-play-state en CSS controla el estado de ejecución de una animación. Te permite pausar, reanudar o iniciar una animación de forma manual, agregando mayor control sobre el comportamiento de las animaciones en tu sitio web.

SINTAXIS:

selector {
  animation-play-state: valor; /* Estado de reproducción de la animación */
  /* Otras propiedades de animación */
}Lenguaje del código: CSS (css)

Explicación:

• selector: Es el selector CSS que define a los elementos HTML a los que se aplicará la animación.
• valor: Es el valor que indica el estado de reproducción de la animación. Los valores posibles son:
  • running: La animación está en ejecución y se reproduce de forma normal. Este es el valor por defecto.
  • paused: La animación está pausada y detenida en el fotograma actual.
  • initial: La animación se reinicia y comienza desde el principio del ciclo.

¿Cómo usar la propiedad animation-play-state? EJEMPLO:

Aquí tienes un ejemplo básico que muestra cómo usar animation-play-state para pausar y reanudar una animación:

ESTRUCTURA HTML: Para crear un cuadro y dos botones.

<div class="elemento"></div>
<button onclick="pausarAnimacion()">Pausar Animación</button>
<button onclick="reanudarAnimacion()">Reanudar Animación</button>Lenguaje del código: HTML, XML (xml)

CSS: Se define una animación llamada mover (en el @keyframes) que desplaza el elemento .elemento 200px a la derecha en 4 segundos, repitiéndose indefinidamente.

@keyframes mover {
  0% { transform: translateX(0); }
  100% { transform: translateX(200px); }
}

.elemento {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: mover 4s linear infinite;
  animation-play-state: running; 
}Lenguaje del código: CSS (css)

JavaScript: Se crea para llamar a las funciones pausarAnimacion() y reanudarAnimacion() de los dos botones HTML. Estas funciones cambian el valor de animation-play-state del elemento, pausando o reanudando la animación.

function pausarAnimacion() {
  document.querySelector('.elemento').style.animationPlayState = 'paused';
}

function reanudarAnimacion() {
  document.querySelector('.elemento').style.animationPlayState = 'running';
}Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Definición de la Animación:
   • Se define una animación llamada mover que desplaza el elemento .elemento 200px a la derecha en 4 segundos, repitiéndose indefinidamente.
2. Uso de animation-play-state: running;
   • La animación se establece inicialmente en estado running, lo que significa que se ejecuta tan pronto como se aplica el estilo.
3. Pausar y Reanudar:
   • Se crean dos botones en el HTML que, al hacer clic, llaman a las funciones JavaScript pausarAnimacion() y reanudarAnimacion(), respectivamente. Estas funciones cambian el valor de animation-play-state del elemento, pausando o reanudando la animación.

¿La propiedad animation-play-state se usa siempre con JavaScript?

No necesariamente tiene que usarse siempre con JavaScript, pero JavaScript proporciona una manera fácil y efectiva de cambiar dinámicamente el estado de reproducción de una animación en respuesta a eventos del usuario o condiciones específicas.

Sin embargo, también se puede utilizar animation-play-state con CSS puro, por ejemplo, en conjunto con pseudo-clases como :hover o :focus.

Consideraciones importantes al usar animation-play-state:

• Control manual: La propiedad animation-play-state te permite controlar la animación con JavaScript.
• Efecto en la sincronización: Si pausás una animación y luego la reanudás, no se sincronizará con otras animaciones que se estén ejecutando al mismo tiempo.
• Soporte del navegador: La propiedad animation-play-state tiene un buen soporte en navegadores modernos, pero es importante verificar la compatibilidad en navegadores más antiguos.

RESUMEN DE animation-play-state:

animation-play-state es una propiedad valiosa para agregar interactividad a tus animaciones CSS. Te permite pausar, reanudar o iniciar animaciones de forma dinámica, creando experiencias de usuario más atractivas y receptivas.

3. ¿Cómo hacer animaciones en CSS? Paso a paso.

Ahora que sabemos cuales son los componentes mas comunes para crear estas animaciones, te dejamos el paso a paso para ponerlos en tu página web:

1. PASO 1. Define lo que quieres animar:
2. PASO 2. Crea la regla @keyframes:
3. PASO 3. Aplica la animación al elemento:
4. PASO 4. Refina y personaliza:
5. PASO 5: Ten en cuenta optimizaciones y mejoras:

PASO 1. Define lo que quieres animar:

• Decide qué elemento HTML deseas animar y cómo quieres que se mueva. ¿Quieres que cambie de color, posición, tamaño o realice una transformación más compleja?
• Visualiza el efecto final que deseas lograr y ten en mente los pasos intermedios de la animación.

PASO 2. Crea la regla @keyframes:

• Recuerda que esta regla define la secuencia de estilos que se aplicarán al elemento durante la animación.
• Utiliza porcentajes para indicar en qué momento del ciclo de animación se aplica cada estilo. Por ejemplo, 0% representa el inicio y 100% el final.
• Puedes definir propiedades CSS como transform, opacity, background-color, etc., para modificar el aspecto del elemento en cada paso.
• Ejemplo:

@keyframes cambio-color {
  0% {
    color: blue;
  }
  50% {
    color: green;
  }
  100% {
    color: red;
  }
}Lenguaje del código: CSS (css)

PASO 3. Aplica la animación al elemento:

• Selecciona el elemento HTML que deseas animar con un selector CSS.
• Utiliza la propiedad animation-name para referenciar la regla @keyframes que has creado.
• Define otras propiedades de animación como animation-duration, animation-delay, animation-iteration-count, animation-direction y animation-fill-mode para controlar el comportamiento de la animación.
• Ejemplo:

.animado {
  animation-name: cambio-color;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}Lenguaje del código: CSS (css)

PASO 4. Refina y personaliza:

• Experimenta con diferentes valores de las propiedades de animación para ajustar la velocidad, la fluidez, la repetición y el aspecto de la animación.
• Combina diferentes animaciones en un mismo elemento para crear efectos más complejos.
• Utiliza funciones de temporización como ease, ease-in-out, cubic-bezier() para controlar la velocidad de la animación en diferentes momentos.
• Agrega transiciones CSS suaves con transition para mejorar la experiencia visual.

PASO 5: Ten en cuenta optimizaciones y mejoras:

• Optimización de Rendimiento: Usa will-change para mejorar el rendimiento en navegadores modernos.

.box {
  will-change: transform;
}Lenguaje del código: CSS (css)

• Responsividad: Usa media queries para ajustar las animaciones en diferentes tamaños de pantalla.

@media (max-width: 600px) {
  .box {
    animation-duration: 2s;
  }
}Lenguaje del código: CSS (css)

• Interacciones: Agrega animaciones a eventos como :hover y :focus.

.box:hover {
  animation-play-state: paused;
}Lenguaje del código: CSS (css)

4. Preguntas frecuentes y resumen sobre animaciones en CSS.