Curso CSS Animaciones Paso a Paso

Hoy damos inicio a un nuevo curso completamente gratuito, en esta ocasión hablaremos de las animaciones en CSS, las animaciones nos permiten animar elementos HTML de una manera simple, sencilla y sin la necesidad de utilizar javaScript.

Te damos la bienvenida y esperamos que este curso te sea de mucha ayuda y que puedas comprender y más que todo, poner en práctica lo que has aprendido.

Iniciamos…

Tanto las transiciones como las animaciones, cuentan con sus respectivas propiedades, la relación entre propiedades entre estas dos formas, son prácticamente las mismas, como lo mencionamos en el curso anterior, Curso CSS Transiciones,  el cual te invitamos a tomar, si aun no te enteras de el.

Las propiedades de las animaciones son las siguientes:

@keyframes: No es una propiedad, más bien es una regla que, nos  permite controlar los pasos intermedios en una  animación, a través de los denominados, puntos de trayectoria, los cuales son controlados por el navegador

• animation-name: Define el nombre de la animación
• animation-duration: Define el tiempo que tardará la animación en completarse, para que todo funcione correctamente, debe especificarse esta propiedad, de lo contrario, no sucederá nada
• animation-delay: Tiempo de retardo que debe transcurrir antes de comenzar la animación
• animation-iteration-count: Numero de veces que un ciclo de animación debe ejecutarse antes de que finalice.
• animation-direction: Indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.
• animation-timing-function: Especifica cómo una animación debe avanzar sobre la duración de cada ciclo.
• animation-fill-mode: Modo en que una animación aplica sus estilos, estableciendo su persistencia y estado final tras su ejecución.
• animation-play-state: determina si una animación está en ejecución o en pausa
• animation: Shorthand o atajo de todas las propiedades anteriores

Te prodría interesar

Curso CSS Transiciones Paso a Paso

Curso CSS Grid Paso a Paso

Curso CSS Flexbox Paso a Paso 

Con estas trabajaremos a partir de ahora

Primero, aprenderemos el concepto de ¿Que son las animaciones?

Las animaciones son diferentes estados que puede tomar un elemento, el cual puede pasar de un estado a otro, las animaciones se basan en fotogramas, los cuales definen el estado de un elemento y los diferentes estados o cambios que este tomara en diferentes momentos

Para activar una animación, es indispensable, vincular keyframes al elemento que deseas animar, ya que aquí, es donde ocurre todo, veamos un primer ejemplo:

• from = desde este punto
• to = hasta este punto

Ejemplo 1

En este primer y típico ejemplo, haremos que un elemento div se desplace de un punto hacia el otro, estableciendo dentro del from un left de 0 como punto de partida y en el to un left de 400px, aquí solamente son necesarias dos propiedades indispensables para que una animación tenga efecto; animation-duration y animation-name

See the Pen ejemploi by FranDev (@FranDevhn) on CodePen.

Utilizando porcentaje

También es posible aplicar una animación, utilizando un porcentaje (%) como valor para aplicar una animación, el cual tendrá diferentes estados si así lo especificamos dentro de estos, veamos cómo se hace:

Ejemplo 2

En este ejemplo haremos que un elemento cambie de color de fondo e inicie desde 0% hasta llegar al 100%, de este modo recorrera todos los colores dentro de esos porcentajes

See the Pen Ejemplo2 by FranDev (@FranDevhn) on CodePen.

Retraso de la animación

animation-delay

Es posible aplicar un retraso a nuestra animación en caso de que no queramos que se inicie de una.

Ejemplo 3

Utilizando el ejemplo anterior aplicaremos un retraso de 2 segundos a nuestra animación:

See the Pen Ejemplo3 by FranDev (@FranDevhn) on CodePen.

Veces que se repetirá o ejecutara la animación

animation-iteration-count

Con esta propiedad establecemos las veces que debe ejecutarse la animación

Ejemplo 4

En este ejemplo, aplicaremos una animación que se ejecute 4 veces, luego de eso no se ejecutará más.

 

See the Pen Ejemplo4 by FranDev (@FranDevhn) on CodePen.

Tienes que tener claro 2 cosas:

• A mayor duración, animación más lenta
• A menor duration, animación más rápido en su ejecución

Dirección de la animación

animation-direction

Propiedad que nos permite establecer la dirección de nuestra animación, está, a su vez, posee cuatro propiedades:

Sus propiedades son:

• normal: la animación no sufre ningún efecto, es su opción por defecto (hacia adelante)
• reverse: La animación se ejecuta de atrás hacia adelante
• alternate: La animación alterna su ejecución de atrás hacia adelante y viceversa
• alternate-reverse: La animación se ejecuta de atrás hacia adelante

See the Pen Ejemplo5 by FranDev (@FranDevhn) on CodePen.

Curva de velocidad de la animación

animation-timing-function

Con esta propiedad especificamos la curva de velocidad que tomara la animación y al igual que la propiedad anterior esta también posee sus respectivos valores:

• ease: Lento - Rápido - Lento (Por defecto)
• linear: Misma velocidad de principio a fin
• ease-in: Inicio lento
• ease-out: Final lento
• ease-in-out: Inicio lento - Final lento

Ejemplo 6

En este ejemplo veremos cómo se comportan las propiedades de animation-timing-function

See the Pen Ejemplo6 by FranDev (@FranDevhn) on CodePen.

Persistencia de la animación

animation-fill-mode

especifica el modo en que una animación CSS aplica sus estilos, estableciendo su persistencia y estado final tras su ejecución.

Sus propiedades son:

• none: No aplicará ningún efecto a la animación
• forwards: El elemento conservará los valores de estilo establecidos por el último fotograma clave (depende de la dirección de la animación y el recuento de iteraciones de la animación)
• backwards: El elemento obtendrá los valores de estilo establecidos por el primer fotograma clave (depende de la dirección de la animación) y los conservará durante el período de retraso de la animación.both: La animación seguirá las reglas tanto hacia adelante como hacia atrás, extendiendo las propiedades de la animación en ambas direcciones

See the Pen Ejemplo7 by FranDev (@FranDevhn) on CodePen.

Estado de una animación

animation-play-state

Determina si una animación está en ejecución o en pausa, ademaás de ello, podemos reanudar o pausar una animcaión.

Sus valores son:

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

Ejemplo 8

See the Pen Ejemplo8 by FranDev (@FranDevhn) on CodePen.

Utilizando el atajo de las animationes

Ejemplo 9

Haremos un sencillo ejemplo donde utilizaremos la mayoría de propiedades especificando únicamente, una sola propiedad, a partir de aquí podrás ver una gran diferencia entre utilizar el atajo o cada propiedad por separado.

See the Pen Ejemplo9 by FranDev (@FranDevhn) on CodePen.

Detalles de este ejercicio

En este ejercicio hicimos lo siguiente, solo utilizando la propiedad absoluta animation

• 1 animation-name = mover
• 2 animation-duration = 5s
• 3 animation-direction = alternate
• 4 animation-iteration-count = infinite
• 5 animation-timing-function = ease-in-out
• 6 animation-fill-mode = both

Todo resumido a:  animation: mover 5s infinite alternate ease-in-out both 

Todas estas líneas, están incluidas en una sola propiedad, animation, como puedes observar nos ahorramos un montón de líneas a la hora de querer aplicar diferentes animaciones o estados a un elemento