Formaciones

    Lemoncode TV

    00:00 / 00:00

    Logo curso Animaciones CSS

    Animaciones CSS

    Fecha publicación: 6 feb 2023

    Transiciones

    ¿Queréis hacer animaciones web pero no sabéis por dónde comenzar? Pues antes de ponernos manos a la obra hay que entender la diferencia entre una transición y una animación CSS.

    Las transiciones proporcionan un cambio de un estado A a un estado B, mientras que las animaciones dentro de CSS permiten modificar la apariencia y el comportamiento de un elemento en varios fotogramas claves que son conocidos como keyframes, y podrían ir de un estado A, B, C, D etc..

    Las transiciones están limitadas a dos estados, y esto es algo que hacen que carezcan de cierta flexibilidad, pero al mismo tiempo son mucho más fáciles de utilizar que las animaciones.

    Manos a la obra

    Vamos a ver un ejemplo muy sencillo en nuestro HTML de como armar una transición, partimos de este armazón 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" />
    <title>Document</title>
  </head>
  <body></body>
</html>

    Vamos a crear un div y aplicarle una clase container, dentro de éste vamos a crear otro div al que vamos a aplicarle la clase box (estos nombres si quieres los puede poner en español caja, no es una palabra reservada de css), en este segundo div vamos a aplicar la transición.

    <!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" />
    <title>Document</title>
  </head>
  <body>
+    <div class="container">
+      <div class="box"></div>
+    </div>
  </body>
</html>

    En el CSS añadimos propiedades a la clase box (caja), dándole los siguientes atributos:

    • Ancho de 200 pixeles.
    • Alto de 200 pixeles.
    • Un background de color red.
    .box {
  width: 200px;
  height: 200px;
  background: red;
}

    Añadimos ahora un estado, .box:hover, así cuando pongamos el ratón encima de la caja podemos lanzar una transición en la que vamos a cambiarle el color de fondo a la misma, a azul (esta transición la podrías aplicar a otros estados, por ejemplo: active, focus, etc...).

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

+ .box:hover {
+  background: blue;
+ }

    Otra de las diferencias entre una transición y una animación es que en la transición tiene que ser el usuario el que ejecute alguna acción para que sea triggeada (para que se lance), mientras que en las animaciones no es necesario que el usuario realice la acción, también puedes lanzarlas con JavaScript, o cuando pase algo en la página etc...

    Como podemos comprobar cuando hacemos hover sobre la caja, se realiza el cambio de background de rojo a azul, pero de una manera brusca:

    Hover sin transición, se cambia de manera brusca de rojo a azul

    Lo que estamos buscando es un efecto fluido, para ello vamos añadirle una transición, ¿cómo funciona?:

    • Usamos el atributo transition.
    • En ella le definimos la propiedad que va a cambiar, en este caso background.
    • Le indicamos el tiempo que va a durar la transición, en este caso 1 segundo.
    • Le indicamos la función de tiempo, en este caso linear (qué tenga la misma velocidad de principio a fin, existen otro valores como, por ejemplo, ease en la que arrancamos lento, después aceleramos y terminamos lento).
    .box {
  width: 200px;
  height: 200px;
  background: red;
+ transition: background 1s linear;
}

    Si ahora ejecutamos y ponemos el ratón encima del rectángulo podrás ver que al lanzarse el cambio de estado (hover), la transición se ejecuta de una manera mucho más fluida y de una manera linear (podríamos cambiar el linear por ease-in-out, ease-in, ease-out, etc... y tendríamos velocidades de salida y frenada), como os he comentado la transición va de un valor A a un valor B, inicial y final, es el navegador el que se encarga de hacer la interpolación entre los dos valores, si os fijáis, en la transición no sólo se nota el cambio de color, si no que hay unos fotogramas intermedios autogenerados por el navegador (es decir se encarga de realizar la interpolación entre el rojo y el azul).

    Al añadir la transición y hacer hover, el cambio de rojo a azul es fluido

    Si quieres ver el ejemplo en funcionamiento y bichear con el código, puedes hacerlo en el siguiente enlace codesandbox demo transición fluida

    Y hasta aquí este primer video, ¡Felicidades! Acabáis de crear vuestra primera transición, en el siguiente video nos arrancaremos con las animaciones.

    ¿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.