Animaciones y Transiciones en CSS

Guía de transiciones

Las transiciones en CSS permiten cambiar progresivamente las propiedades de los elementos, proporcionando efectos de animaciones suaves cuando ocurre un evento que dispara la transición. Esto ayuda a mejorar la experiencia del usuario y aporta dinamismo a los sitios web. En general, el uso de las transiciones es muy importante ya que nos permite aportar dinamismo a nuestras aplicaciones sin la necesidad de utilizar JavaScript.

Propiedad transition

Para crear transiciones es necesario hacer uso de la propiedad transition, la cual nos ayuda a definir el efecto de una transición sobre un elemento, la sintaxis de esta propiedad es la siguiente:

selector {
  transition: property duration timing-function delay;
}

En donde:

• property: Nos ayuda a definir la propiedad de CSS sobre la cual se va a aplicar la transición, por ejemplo: background-color, color, width, opacity, all, etc.
• duration: Esta se define en unidades de tiempo y sirve para especificar la duración de la transición, por ejemplo: 2s, 500ms, etc.
• timing-function: Esta propiedad sirve para definir la velocidad con la que se ejecutara la animación de la transición, en esta tenemos varias opciones las cuales son: ease, ease-in, ease-out, linear, ease-in-out y cubic-bezier(n,n,n,n).
• delay: Sirve para establecer el tiempo que se tardara en iniciar la animación una vez que se dispara la transición, por ejemplo: 0.5s, 1s, etc.

En general la propiedad transition es una abreviación de cuatro propiedades que definen los valores anteriores por separado, estas son: transition-property, transition-duration, transition-timing-function y transition-delay.

A continuación se muestra un ejemplo de cómo utilizar la propiedad transition:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: serif;
}

.item {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: tomato;
  transition: background-color 2s;
  /* Hacemos una transición para la propiedad especificada, esta tendrá una duración de 2 segundos. En este caso como la transición esta en el elemento cualquier disparador que cambia esta propiedad generara la transición */

  transition-property: background-color;
  /* Esta indica a la o las propiedades que va a sufrir la transición, en este caso el color del fondo. Si ponemos all indica todas las propiedades*/

  transition-duration: 2s;
  /* Esta indica el tiempo que va a durar la transición */

  transition-timing-function: ease;
  /* Esta indica el efecto que va a tener la transición, existen infinidad de valores para esta propiedad, pero los mas usados son ease, ease-in, ease-out, ease-in-out, linear, cubic-bezier, etc. */

  transition-delay: 0.5s;
  /* Es el tiempo que va a tardar para incoar la transición */
}

.item:hover {
  /* Este es un ejemplo de disparador */
  background: steelblue;
  /* transition: background-color, width 2s; */
  /* Cuando usamos la transición en el disparador, esta solo se generara cuando este disparador sea ejecutado. En este caso la transición afecta a dos propiedades */
}

/* Mas ejemplos de transiciones */

.item {
  clip-path: circle(50% at top left);
  transition: clip-path 1s ease 0.5s;
}

.container:hover .item {
  clip-path: circle(150% at top left);
}

.transition1 {
  width: 90%;
  margin: 20px auto;
  padding: 20px;
  background-color: beige;
  border: 2px solid black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item1 {
  width: 200px;
  height: 200px;
  background-color: crimson;
  transition: all 2s cubic-bezier(.18, 1.52, .76, -0.43);
}

.item2 {
  width: 200px;
  height: 200px;
  background-color: lime;
}

.transition1:hover .item1 {
  margin-left: 600px;
}

.transition1:hover .item2 {
  transform: rotate(45deg);
}

Guía de animaciones

Las animaciones en CSS son parecidas a las transiciones, pero a diferencia de estas que solo se ejecutan una sola vez cuando un trigger las dispara, las animaciones permiten cambiar las propiedades de los elementos de forma continua a lo largo del tiempo, creando efectos bastante llamativos que le dan vida y dinamismo a los sitios web.

Propiedad animation

Para crear animaciones en CSS debemos de hacer uso de la propiedad animation, la cual es un shorthand que agrupa varias propiedades mediante las cuales podemos configurar el comportamiento y la forma en como se muestran las animaciones, la sintaxis de esta propiedad es la siguiente:

selector {
  animation: name duration timing-function delay iteration-count direction fill-mode;
}

En donde:

• name: Hace referencia al nombre de la animación que se va a aplicar, este debe de estar definido en una regla @keyframes.
• duration: Define el tiempo que durara la animación, este se define en unidades de tiempo como s o ms.
• timing-function: Esta propiedad sirve para definir la velocidad con la que se ejecutara la animación, en esta tenemos varias opciones las cuales son: ease, ease-in, ease-out, linear, ease-in-out y cubic-bezier(n,n,n,n).
• delay: Sirve para establecer el tiempo que se tardara en iniciar la animación una vez que se dispara, por ejemplo: 0.5s, 1s, etc.
• iteration-count: Esta propiedad define el número de veces que se va a repetir la animación, si queremos que esta se ejecute infinitamente hacemos uso del valor infinite.
• direction: Aquí se establece la dirección en que se realizara la animación, la cual puede ser normal para que la animación se ejecute de inicio a fin, reverse para ejecutarse de fin a inicio, alternate para alternar de inicio a fin y de fin a inicio, alternate-reverse para alternar pero al revés de fin a inicio y de inicio a fin.
• fill-mode: Controla el estilo con el que se quedara el elemento una vez que se complete la animación, aquí se puede usar como backwards para que se quede con los estilos del inicio de la animación, forwards para que se quede con los del final de la animación, both para que se quede con ambos y none para ninguno.

Al igual que las transiciones, y como se mencionó anteriormente, cada una de estas propiedades puede ser definida por separado, debido a que la propiedad animation es un shorthand que agrupa las siguientes propiedades: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode y animation-play-state, esta ultima no forma parte del shorthand animation , pero es una propiedad algo importante, debido a que esta nos sirve para controlar el estado de la animación, es decir, si esta se esta ejecutando running o si esta en pausa paused.

@keyframes

Los @keyframes es donde definimos el flujo de las animaciones, desde los valores de las propiedades de inicio hasta el final de la animación. Existen dos formas principales de definir animaciones en los @keyframes, la primera es usando porcentajes, y la segunda es usando palabras clave como from y to.

La sintaxis de los @keyframes es la siguiente:

@keyframes formOne {
  from {
    /* Propiedades de inicio */
  }

  to {
    /* Propiedades de fin */
  }
}

@keyframes formTwo {
  0% {
    /* Propiedades de 0% */
  }

  50% {
    /* Propiedades de 50% */
  }

  100% {
    /* Propiedades de 100% */
  }
}

A continuación se muestra un ejemplo de cómo utilizar la propiedad animation junto con los @keyframes:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.circle {
  width: 150px;
  height: 150px;
  margin-top: 30px;
  margin-left: 20px;
  border-radius: 50%;
  background-color: cornflowerblue;

  animation-name: animation4;
  /* Mandamos llamar al keyframe */
  animation-duration: 2s;
  /* Es el tiempo que dura la animación */
  animation-timing-function: ease-in-out;
  /* Es la función de velocidad de la animación */
  animation-delay: 0.5s;
  /* Es el tiempo que tarda en empezar la animación */
  animation-iteration-count: infinite;
  /* Le especificamos que la animación se ejecute un cierto numero de veces, en este caso infinitas veces */
  animation-direction: alternate;
  /* Es la dirección o flujo de la animación, por defecto esta en normal
    pero existen mas valores como alternate, que hace que la animación se igual de inicio a fin como de fin a inicio, alternate-reverse es igual a la anterior pero esta intercambia el orden de ejecución, reverse hace que la animación empiece del final y termine al inicio. Estos valores solo se ejecutan cuando el iteration-count es mayor a uno */
  animation-fill-mode: forwards;
  /* Esta propiedad define con que estilos de la animación se 
    quedara nuestro elemento, backwards es el valor por defecto y hace que se quede con los mismos estilos del inicio, pero forwards hace que se quede con los estilos aplicados al 100%. Aunque esto solo funciona cuando el numero de veces que se repite la animación no es infinito */
  animation-play-state: running;
  /* Esta propiedad define si la animación esta activa o esta en pausa
    por defecto tiene el valor running que es ejecutándose, mientras que paused hace que la animación se ponga en pausa y deje de ejecutarse */

  /** Shorthand animation */
  /* Aquí podemos ver que los valores anteriores los podemos usar de esta manera corta */
  animation: animation4 2s ease-in-out 0.5s infinite alternate forwards running;

  /** animación final */
  animation: animation 3s ease 0.25s infinite alternate;
}

/* Un keyframe es donde manejamos todo el flujo de la animación que deseamos realizar */
@keyframes animation1 {
  from {
    /* De inicio empieza la animación */
    background-color: crimson;
  }

  to {
    /* A fin termina */
    background-color: blueviolet;
  }
}

@keyframes animation2 {
  0% {
    /* Podemos usar porcentajes de donde va la animación */
    background-color: crimson;
  }

  50% {
    background-color: lime;
  }

  100% {
    background-color: teal;
  }
}

@keyframes animation3 {
  0% {
    transform: scale(1);
  }

  20% {
    transform: scale(1.3);
  }

  40% {
    transform: scale(1.6);
  }

  60% {
    transform: scale(1.9);
  }

  70% {
    transform: scale(1);
  }

  80% {
    transform: scale(0.7);
  }

  90% {
    transform: scale(0.5);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes animation4 {
  from {
    transform: translateX(0) translateY(0);
  }

  to {
    transform: translateX(100%) translateY(100%);
  }
}

@keyframes animation {
  0% {
    transform: translate(0);
    background-color: crimson;
  }

  25% {
    transform: translateX(100%);
    background-color: salmon;
  }

  50% {
    transform: translateX(100%) translateY(100%);
    background-color: slateblue;
  }

  75% {
    transform: translateX(0) translateY(100%);
    background-color: 100%;
  }
}