Qué son las animaciones en CSS y cómo aplicarlas

Como explique anteriormente, las transiciones animan elementos en el tiempo. Sin embargo a diferencia de las animaciones, las transiciones son mucho más limitadas ya que sólo definimos el estado principio y el final cuando en las animaciones poder tener el control de los estados que estén en el medio. Las animaciones en css permiten controlar cada paso de la animación mediante keyframes (fotogramas).

Un keyframe es una captura que define el punto de inicio y fin de una transición fluída. Con las transiciones estamos limitados a definir el primer y último keyframe. Las animaciones en CSS permiten añadir tantos keyframes como necesitamos para poder realizar animaciones mucho más complejas.

También cabe añadir que a diferencia de una animación en JavaScript, las animaciones en CSS son más livianas haciendo que la CPU no tenga que trabajar tanto.

Cómo poner animaciones en css

Para poder usar las animaciones, primero tenemos que crear y nombrar una animación y luego adjuntar al elemento que queremos animar dentro de su bloque declarativo. Las animaciones en sí mismas no hacen nada, por tanto, es necesario que asocies la animación con el elemento.

Y ahora vamos a lo importante, a crear la animación. Para ello necesitamos la keyword @keyframes

Luego dentro de esas llaves, cada keyframe o fotograma tiene su propio bloque declarativo. En vez de emplear un selector, se usan las keyword from o to, un porcentaje o una lista de porcentajes separados por comas. Cada bloque representa el lugar/tiempo de la animación y contiene las acciones que se realizarán en ese lapso. Cuando me refiero a acciones, me refiero a propiedades y valores, cómo si estuviéramos diseñando un elemento. Entre cada keyframe, los valores de las propiedades irán cambiando suavemente gracias al motor de animación del navegador.

Los keyframes pueden especificarse en cualquier orden ya que lo que cuenta son los valores porcentuales qué son los que determinan la secuencia exacta de la animación.

Un ejemplo de cómo hacer animaciones en css

La animación en CSS que vamos a crear consistirá en un desplazamiento a la derecha y a medida que se va desplazando, va perdiendo opacidad.

Al poner 0% y sus propiedades es como indicar el punto de partida, cómo deben ser las propiedades del elemento al inicio de la animación. Con el 50% se establece que a la mitad de la animación debe estar a 150px de la izquierda con casi media opacidad. Hay que tener en cuenta que esta transición no se hace de una manera brusca, es decir, la propiedad left va aumentando px a medida que pasa la animación mientras opacity va reduciendo. La animación termina con el elemento 250px de la izquierda y sin opacidad, insivible.

Ahora tenemos una animación pero, hay que asignarlo a un elemento para verlo en acción y antes es preciso revisar las propiedades que nos ofrece animation

Propiedades de animation

animation-name

Esta propiedad es la que vamos a usar para adjuntar la animación al elemento. Recordemos que hemos llamado a la animación «miAnimación»

Aunque el nombre esté entre comillas, es opcional pero es recomendable para hacer el código legible y evitar conflictos.

animation-duration

Define la longitud en tiempo, en segundos o milsegundos, que necesita una animación para completar una iteración.

animation-timing-function

Determina cómo va a progresar la animación en su transcurso. Los valores son los mismos que en transition-timing:  ease, linear, ease-in, ease-out, ease-
in-out, or cubic-bezier.

animation-iteration-count

Esta propiedad permite definir cuántas veces queremos que la animación se reproduzca. Se puede usar valores enteros y decimales aunque, con estos último la animación se cortaría en el proceso. También podemos establecer infinite para que se repite la animación sin parar.

animation-direction

Si asignamos a esta propiedad el valor de alternate, haremos que la animación una vez terminada se reproduzca marcha átras. Por defecto el valor es normal.

animation-delay

Establece el tiempo en milisegundos o segundos que tardará la animación en reproducirse.

animation-fill-mode

Define que sucede antes del comienzo de la animación  y después de haber concluido. Por ejemplo, igual quieres que antes de que comience la animación (suponiendo que tienes un delay o retardo) el elemento ya tengas las propiedades del primer keyframe o también si quieres mantener las propiedades una vez finalizada la animación. Para conseguirlo podemos emplear los valores forwards, backwards, o both (los 2).

Por defecto esta propiedad tiene el valor none, la animación comienza y termina como se espera. Si aplicamos el valor forwards, la animación continua aplicando los valores del último keyframe una vez termine la animación. Cuando establecemos backwards, las propiedades del keyframe inicial se aplican al elemento tan pronto como el estilo de la animación de declarado al elemento.

Aplicando la animación

Una vez que ya sabemos todas las propiedades que conciernen en una animación en CSS, procedemos a asignarle la animación al elemento. El elemento en cuestión es un cuadrado azul con el identificador «animate»

#animate
{
width:200px;
height:200px;
background-color:#00F;
position:absolute;
animation: ‘miAnimacion’ 2s ease-in 2s forwards;
}

Cómo ocurría con transition, la propiedad animation permite englobar todos los valores en una propiedad e incluso poder declarar más de una animación si están separadas por comas. Con animation le indicamos que la animación a reproducir es «miAnimacion» que dura 2 segundos con un ritmo ease-in y que tardará en reproducirse en 2 segundos. Una vez termine la animación, las propiedades del último keyframe prevalecerán.

Resultado de la animación

Y hasta aquí lo referido en animaciones en CSS, espero que os ayuden un montón. A seguir picando 🙂