Formaciones

    Lemoncode TV

    00:00 / 00:00

    Logo curso Animaciones CSS

    Animaciones CSS

    Fecha publicación: 6 feb 2023

    Animaciones

    Con las animaciones CSS podemos realizar animaciones web más potentes que con las transiciones, además el usuario no tiene que realizar ninguna acción para que se ejecute la misma, podemos, por ejemplo, indicar que se ejecute cuando se finalice la carga de una página, cuando se lance un script...

    Manos a la obra

    Vamos a ejecutar una animación CSS partiendo del ejemplo que implementamos en el vídeo anterior (el de la transición)

    Partimos de este CSS

    .box {
  width: 200px;
  height: 200px;
  background: red;
}

.box:hover {
  background: blue;
}

    Y de este HTML

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./src/styles.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

    Si quieres ir programando este ejemplo, puedes tomar como punto de partida este codesandbox punto de partida para que lo piques tu :)

    Lo primero que necesitamos para empezar a trabajar con animaciones CSS es crear la regla keyframes y añadirle un identificador para poder referenciarla en el elemento que queramos animar:

    .box:hover {
  background: blue;
}

+ @keyframes cuadrado-animado {
+ }

    Ahora pasamos a indicarle sus estados (arrancamos con dos): para empezar queremos que haga exactamente lo mismo que la transición, le indicamos con from que parta del estado inicial background red, y termine con el estado final que sería background blue.

    @keyframes cuadrado-animado {
+  from {
+    background: red;
+  }
+  to {
+    background: blue;
+  }
}

    Vamos a borrar del box el background: red, y el contenido que teníamos en el hover:

    .box:hover {
-  background: blue;
}


.box {
  width: 200px;
  height: 200px;
-  background: red;
}

    Y ahora vamos a indicar las tres propiedades más importantes de una animación CSS (por claridad vamos a definirlas de forma individual, más adelante veremos como se pueden definir de forma abreviada):

    • animation-name: el nombre de la animación
    • animation-duration: la duración de la animación (en este caso le damos 2 segundos de duración)
    • animation-timing-function: aquí definimos el ritmo y la velocidad de nuestra animación, en este caso vamos indicarle que sea linear.
    .box:hover {
+ animation-name: cuadrado-animado;
+ animation-duration: 2s;
+ animation-timing-function: linear;
}

    Animación simple de rojo a azul con 2 segundos de duración y linear

    Estas propiedades también se pueden aplicar de manera abreviada y nos permite establecer valores de varias propiedades CSS de forma simultánea, por ejemplo podríamos poner todo junto:

    ** No copiar este código es sólo de referencia **

    .box:hover {
+  animation: cuadrado-animado 2s linear;
}

    Si probamos, podemos apreciar que el cuadrado no se ve :-@, eso es porque no hemos definido de manera default un background para ese elemento, si hiciéramos un hover sobre la posición del mismo, veríamos que cambia de color, lo que vamos a hacer es:

    • Eliminar de las keyframes el from azul.
    • Pasarlo a la clase box que utiliza nuestro cuadrado.
    .box {
  width: 200px;
  height: 200px;
+  background: red;
}

.box:hover {
  animation-name: cuadrado-animado;
  animation-duration: 2s;
  animation-timing-function: linear;
}

@keyframes cuadrado-animado {
-  from {
-    background: red;
-  }
  to {
    background: blue;
  }
}

    Codesandbox de este ejemplo, animación simple dos segundos linear

    Ahora si se ve de entrada el cuadrado rojo y cuando hacemos hover sobre él va a ir transicionando hacia el azul, recordad que el navegador se encarga de intrepretar los keyframes que hay entre medias y aplica una interpolación para que del rojo pase al azul, ¿cómo podemos tener más control sobre la animación? Muy fácil con porcentajes, podemos decirle por ejemplo tres cortes: 0%, 50% y 100%, jugando esta vez con tres colores:

    @keyframes cuadrado-animado {
+  0% {
+    background: red;
+  }
+  50% {
+    background: pink;
+  }
+  100% {
+    background: green;
+  }
-  to {
-    background: blue;
-  }
}

    Animación en tres pasos, rojo, rosa, verde

    Ahora cuando hagamos el hover sobre nuestro elemento va a transicionar por todos estos colores, es importante saber que los porcentajes se calculan en base a la duración que hemos indicado en el atributo animation de la clase box, en la regla keyframe no definimos el tiempo, es decir en el 50%, le indicamos a la mitad del total de la duración como se tiene que comportar el elemento.

    CodeSandbox demo animación tres pasos

    Un tema importante que tenemos que tener en cuenta es que hay propiedades que no son animables, el navegador no es capaz de hacer un morfing entre dos tipografías, ni interpolaciones, o si necesitamos animar un degradado si que tenemos hacks para hacerlo, pero de entrada CSS no sabe com interpretarlo.

    Ahora que sabemos la diferencia entre transiciones y animaciones es hora de que nos metamos en casos más complejos, vamos a por el siguiente vídeo :)

    ¿Te apuntas a nuestro máster?

    Si te ha gustado este ejemplo y tienes ganas de aprender Front End guiado por un grupo de profesionales ¿Por qué no te apuntas a nuestro Máster Front End Online Lemoncode? Tenemos tanto edición de convocatoria con clases en vivo, como edición continua con mentorización, para que puedas ir a tu ritmo y aprender mucho.