Insertar transiciones con CSS3

Logo de CSS3 sobre fondo azul

Una de las utilidades más interesantes que nos proporciona el lenguaje de marcado CSS3, la constituye la posibilidad de insertar transiciones en nuestro sitio web. Para llevarla a cabo hay que emplear la propiedad transition y debe existir un evento que la active, del tipo hover o focus. El resultado será un diseño más dinámico, fruto de la transformación asignada al elemento seleccionado, de acuerdo con una duración, timing e, incluso, un retraso establecido.

transition-property

Especifica la propiedad sobre la que se va a implementar: anchura, fondo, borde, margen… Como no todas son válidas, conviene revisar el listado de aquellas que podemos utilizar, suministrado por el World Wide Web Consortium (W3C): www.w3.org/TR/css3-transitions/#animatable-properties

transition-duration

Es otra propiedad sencilla de conformar, pues fija el tiempo que discurre desde el comienzo hasta el final de la transición. Se puede señalar tanto en segundos como en milisegundos: 3s ó 3000ms.

transition-timing-function

Dispone la manera en la que se desarrollará la animación y encierra algo más de dificultad que las anteriores, en alternativas como cubic-bezier o steps.

  • linear: el progreso es invariable a lo largo de toda la duración, avanzando linealmente.
  • ease: el inicio y el desenlace son más lentos que el nudo.
  • ease-in: el principio es lento, pero luego transcurre de forma constante.
  • ease-out: justo al contrario que ease-in, ya que aquí lo que se ralentiza es el remate.
  • ease-in-out: tanto el arranque, como el colofón son lentos. Su diferencia con ease reside en que este último empieza más rápido de lo que termina, mientras que la curva de ease-in-out es totalmente simétrica.
  • cubic-bezier: nos permite modelar la velocidad a nuestro gusto. Es bastante complejo, aunque existen eficientes herramientas online que facilitan su configuración: cubic-bezier.com
  • steps: la transición no progresa con continuidad, sino que lo hace escalonadamente, según dos parámetros. El primero indica el número de peldaños, siempre con un número entero positivo, y el segundo puede ser start y end, para determinar el momento en el que sucede el cambio; al comienzo del intervalo o a su terminación. Si no se añade este segundo valor, por defecto se atribuye end.
  • step-start: una variante de steps, que equivale a steps(1, start). La animación se dirige inmediatamente al final y permanece allí.
  • step-end: exactamente al revés: steps(1, end). Aquí se mantiene en su estado inicial hasta que expire la duración, instante en el que da el salto.

transition-delay

Su función consiste en agregar un retardo con respecto al inicio de la transición, reseñando el segundo en el que comenzará. Si colocamos un valor negativo (como -2 segundos), le estaremos diciendo que, al empezar, muestre la transformación que correspondería al segundo 2.

 

Aplicación práctica

Ahora vamos a ver todo lo anterior con un ejemplo práctico, en que un botón con fondo negro pasará a ser azul, cuando pongamos el cursor del ratón sobre él. La animación será lineal, durará 0.35 segundos y tendrá un retardo de 0.2. Además, el código incluye los parámetros necesarios para asegurar la compatibilidad con distintos navegadores.

.boton {
   width: 170px;
   height: 45px;
   padding: 10px 20px;
   font-size: 15px;
   color: #fff;
   background-color: #141414;

   transition: background-color 0.35s linear 0.2s;
   -webkit-transition: background-color 0.35s linear 0.2s; /* Chrome y Safari */
   -moz-transition: background-color 0.35s linear 0.2s; /* Firefox */
   -o-transition: background-color 0.35s linear 0.2s; /* Opera */
}

.boton:hover { /* Evento */
   background-color: #0460c3;
}

 
Lo más lógico es que el código vaya en la misma línea, para reducir el peso de su correspondiente fichero CSS. Sin embargo, también es posible que lo encontremos escrito así:

transition-property: background-color;
transition-duration: 0.35s;
transition-timing-function: linear;
transition-delay: 0.2s;

 
Por otra parte, podemos englobar en la misma línea diversas propiedades a modificar:

transition: background-color 2s ease, height 2s ease-out 1s, padding 1s linear;