Formaciones

    Lemoncode TV

    00:00 / 00:00

    Logo curso Animaciones CSS

    Animaciones CSS

    Fecha publicación: 6 feb 2023

    Botón animado

    Con las animaciones CSS podemos mejorar la experiencia de usuario dando feedback de manera efectiva y esto es muy importante, de esta manera le podemos proveer de la información que necesita para saber si sus acciones han tenido o no éxito.

    Muchas veces nos encontramos con botones que no dan feedback, y éste es el elemento más crítico de una interfaz ya que es con lo que nuestro usuario va a poder interactuar y tomar decisiones.

    Manos a la obra

    Vamos a comenzar y para ello crearemos un elemento básico HTML que es el más atómico... ¡ tachaaan ! un botón :), antes de arrancarnos a animar, vamos a darle un poco de estilo:

    • Le indicamos que incluya el tamaño del borde en el cómputo del tamaño del elemento.
    • Que lo centre en pantalla (para ello usamos un container flex).
    • Le damos un color de fondo negro, para que haga contraste.
    html,
body {
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  background-color: black;
}

    Y en el HTML vamos a poner un botón:

    <body>
+  <button>Submit</button>
</body>

    Volvemos a nuestro botón y añadimos la clase button-animation, y le damos el siguiente estilado:

    • Le damos un ancho de 200px.
    • Una altura de 50px
    • Una fuente con un tamaño de 2rem
    html,
body {
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  background-color: black;
}

+ .button-animation {
+  width: 200px;
+  height: 50px;
+  font-size: 2rem;
+ }

    En el HTML le indicamos que vamos a usar esa clase:

    <body>
-  <button>Submit</button>
+  <button class="button-animation">Submit</button>

</body>

    Ya tenemos la base para nuestro elemento, vamos a añadir el selector active, y vamos a crear una simulación de lo que pasaría en un botón de la vida real.

    Cuando el botón esté activo (por ejemplo al hacer un submit) definimos una animación para que el botón se haga un poco más pequeño (para ello aplicamos una transformación en el estado active).

    .button-animation {
  width: 200px;
  height: 50px;
  font-size: 2rem;
}

+ .button-animation:active {
+   transform: scale(0.9);
+ }

    Codesandbox de este paso, sólo transform 0.9 cuando hacemos click sobre el botón

    Así que cuando el usuario hace click en el botón, vemos que el usuario recibe un feedback visual.

    Cuando el usuario pincha en el botón esté se hace un poco más pequeño

    Vamos a añadir el estado hover: cuando posicionamos el ratón encima del botón, el elemento debería de dar la sensación de ser clickable sin necesidad de cambiar el cursor (por usabilidad). Vamos ahora a por una animación en la que cuando el usuario pone el ratón encima del botón, se lanza una animación en la que este control se escale y después se lance un rebote, acordaos que para crear una animación necesitamos la regla keyframes indicando un identificador, en esta caso lo vamos a llamar button-animation (podríamos haberle dado otro nombre, pero es más cómodo utilizar el mismo en este caso)

    Recordad que dentro de los keyframes podemos poner diferentes estados de la animación:

    • Empezamos con un transform scale, pero en este caso va a ser 3d, y vamos a ponerle un valor de 1 en los 3 ejes X, Y y Z (aquí puedes jugar para obtener diferentes comportamientos).
    • Cuando alcanzamos el 50% de la animación modificamos los valores de scale a 1.15, 0.85 y 1
    .button-animation:active {
 transform: scale(0.9);
}

+ @keyframes button-animation {
+   0% {
+     transform: scale3d(1, 1, 1);
+   }
+   50% {
+     transform: scale3d(1.15, 0.85, 1);
+   }
+ }

    Recordar que para la animación se ejecute tenemos que llamarla e incluirla en el elemento, en este caso el estado hover, esta vez usaremos la forma abreviada para invocarla (en una sola línea).

    • Le indicamos que use la animación button-animation
    • La duración la establecemos en 0.9 segundos
    • Aplicamos el valor both es decir que aquí lo configuramos para que la animación vaya y vuelva (efecto chicle)
    .button-animation:active {
 transform: scale(0.9);
}

+.button-animation:hover {
+  animation: button-animation 0.9s both;
+ }

    Hover y animacion en dos pasos

    Codesandbox de la animación hover en dos pasos

    Ahora podemos centrarnos en dejar fina la animación, y añadir todo los estados que queramos, de esta manera podemos ganar dinamismo (mucho cuidado con no pasarnos y acabar siendo unos horteras), vamos a indicarle en el paso 100% que tenga un transform scale de 3d a 0.75, 0.95, 1

    @keyframes button-animation {
  0% {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
+ 100% {
+    transform: scale3d(0.75, 0.95, 1);
+  }
}

    Si probamos, la animación ha quedado más elaborada y de esta manera al usuario le queda claro que puede interactuar con este botón.

    Animación hover en tres pasos

    Codesandbox de la animación hover en tres pasos

    Para finalizar os animo a que sigáis investigando y os recomiendo la web animista.net donde encontraréis una colección enorme de animaciones listas para copiar y pegar en vuestros proyectos.

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