Primeros pasos con las Transiciones en CSS, uso de step y ejemplos sobre imágenes

Uno de los aspectos más interesantes, poderosos y vistosos que trajo CSS3 es el uso de las transiciones que son pasos de transición de un estado a otro de manera progresiva y suave; mediante esta característica podemos realizar efectos muy vistosos con pocas líneas de código CSS con las cuales podemos alterar el tamaño (width y/o height), espaciado (margin y/o padding) color (color y/o background inclusive los degradados), bordes, opacidad (opacity) y en resumen cualquier propiedad con su valor asignado que aplique una forma o estilo a un elemento o grupo de elementos mediante el hover o focus tal cual veremos en esta entrada.

Con la propiedad Transition podemos hacer efectos que permiten que un elemento cambie gradualmente (en un tiempo determinado) de un estilo a otro; si deseas realizar una animación como por ejemplo aumentar algún elemento de tamaño, cambiar su color; con aplicar ciertas reglas CSS sobre ese elemento obtendrás una animación; veamos los principios básicos:

Esto es todo, con tan solo establecer estos sencillos pasos el navegador al interpretar nuestras reglas CSS hará el resto, el trabajo duro.

Qué son las transiciones CSS y por qué mejoran la experiencia de usuario

Las transiciones CSS permiten que un elemento cambie gradualmente de un estilo a otro en lugar de hacerlo de forma brusca. Por defecto, cualquier cambio de propiedad en CSS ocurre de manera instantánea, pero al usar transiciones conseguimos interpolar ese cambio a lo largo del tiempo.

En proyectos reales, he comprobado que una interfaz con transiciones bien aplicadas:

• Resulta más intuitiva
• Da feedback visual al usuario
• Se percibe como más “cuidada” y profesional

Y lo mejor es que no hace falta JavaScript para la mayoría de los casos comunes: botones, menús, tarjetas, galerías o estados interactivos.

Cómo funcionan las transiciones en CSS

Una transición siempre necesita dos ingredientes:

1. Un cambio de estado (por ejemplo, :hover, :focus o una clase añadida).
2. Una propiedad CSS que pueda interpolarse entre un valor inicial y uno final.

La propiedad transition y su forma abreviada

La forma más habitual de definir una transición es usando la propiedad abreviada transition:

transition: propiedad duración función retraso;

Como ya mencionamos; con esta propiedad especificamos la propiedad a la que se le aplicará el cambio progresivo de un estado a otro; por ejemplo si queremos que nuestra propiedad de cambio sea el width debemos de aplicar:

transition-property: width;

Si deseamos especificar más de una propiedad, solo las debemos separar por comas:

transition-property: width,height; 

En este último caso tanto la propiedad width cómo la propiedad height fueron especificadas como propiedades de cambio.

Por ejemplo:

.caja {
 background-color: #c0392b;
 transition: background-color 1s ease;
}
.caja:hover {
 background-color: #3f51b5;
}

Aquí indicamos que el color de fondo debe cambiar de forma progresiva durante 1 segundo.

Propiedades individuales de transición

Si necesitas más control, puedes usar las propiedades por separado:

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

.elemento {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
  transition-delay: 0.5s;
}

Se suele usar la forma abreviada para ejemplos simples y las propiedades individuales cuando el comportamiento empieza a complicarse.

Funcionamiento básico de transition-duration

Con este selector debemos de especificar el tiempo que durará la animación o transición de un estado a otro; y esto lo podemos hacer ya sea en segundos (s) o en milisegundos (ms); veamos un ejemplo:

transition-duration: 1000ms; 

En el ejemplo anterior, indicamos que la transición duraría 1000 milisegundos, o lo que es lo mismo un segundo:

transition-duration: 1s; 

Propiedad transition reducida o resumida

Como ocurre con prácticamente todas las propiedades CSS, la propiedad transition cuenta con una propiedad resumida o acortada en la cual podemos indicar cada una de los valores que vimos anteriormente:

transition: propiedad duración función retraso;

El retraso o delay es opcional y permite retrasar en segundos o milisegundos el efecto de transición; también cuenta con una propiedad especifica transition-delay por ejemplo podemos emplear la siguiente regla:

transition: background 3s ease;

Funciones de intervalos de transición

las funciones para la transición permite definir en un intervalo como queremos que fluya la animación, como explicamos en una entrada:

En la cual hablamos de las curvas de bezier, que es una manera muy común en la cual definimos cómo queremos que se comporte (a nivel de tiempo) las animaciones, aunque en este caso las transiciones, que vienen siendo un equivalente de este, pero con algunas diferencias fundamentales.

• Linear: el movimiento siempre va a la misma velocidad (constante); equivalente a cubic-bezier(0.0, 0.0, 1.0, 1.0).
• Ease: empieza despacio, acelera y termina rápido; equivalente a cubic-bezier(0.25, 0.1, 0.25, 1.0).
• Ease-in: empieza despacio y agarra una velocidad constante; equivalente a: cubic-bezier(0.42, 0, 1.0, 1.0).
• Ease-out: termina despacio; equivalente a: cubic-bezier(0, 0, 0.58, 1.0).
• Ease-in-out: empieza despacio y termina despacio; equivalente a: cubic-bezier(0.42, 0, 0.58, 1.0).

Propiedades CSS que admiten transiciones (y cuáles evitar)

No todas las propiedades CSS se comportan igual cuando se animan.

Propiedades recomendadas para transiciones fluidas

Estas son las que mejor resultado me han dado en producción:

• transform
• opacity
• color
• background-color
• box-shadow

Son propiedades que suelen estar aceleradas por la GPU, lo que las hace más suaves y eficientes.

Propiedades que pueden causar problemas de rendimiento

Aquí conviene tener cuidado:

• width
• height
• top, left, bottom, right

Si no se implementan bien, puede tener comportamientos erráticos al animar posiciones o tamaños, especialmente cuando el elemento se mueve con hover. En algunos casos, el cursor pierde el foco del elemento y la transición se interrumpe, con resultados distintos entre Chrome y Firefox.

Siempre que puedas, es mejor simular esos movimientos usando transform.

Cómo se activan las transiciones CSS: hover, focus y más

Las transiciones se ejecutan cuando un elemento cambia de estado.

Transiciones con pseudoclases

Las más habituales son:

• :hover
• :focus
• :active
• :checked
• :disabled / :enabled

.boton {
 background: #444;
 transition: background 0.3s;
}
.boton:hover {
 background: #000;
}

Transiciones al añadir o quitar clases con JavaScript

En proyectos reales, esta es una de las formas más potentes de usar transiciones. Al añadir o quitar una clase con JavaScript, CSS se encarga de la animación automáticamente.

.box {
 transform: translateX(600%);
 transition: transform 0.4s;
}
.box.show {
 transform: translateX(0);
}

Un detalle importante que aprendí a base de prueba y error: cuando el elemento se crea dinámicamente, la transición no se ejecuta si el cambio ocurre en el mismo “tick”. La solución suele ser introducir un pequeño retraso con setTimeout.

Diferencias entre transiciones de entrada y de salida

Un punto que suele generar confusión es que no siempre la transición se aplica igual al entrar que al salir.

Aplicar transiciones solo al entrar

.element:hover {
 transition: 1s;
}

Aquí la transición solo se ejecuta cuando el cursor entra.

Aplicar transiciones solo al salir

.element:not(:hover) {
 transition: 1s;
}

Usar duraciones distintas con la cascada CSS

.element {
 transition: 4s;
}
.element:hover {
 transition: 1s;
}

Este patrón es muy útil para crear entradas rápidas y salidas más suaves.

Ejemplos sencillos de transiciones

En este primer ejemplo veremos cómo aumentar el tamaño de un elemento; y esto lo hacemos empleando transition-property: width,height:

En este otro veremos cómo cambiar el color de un elemento y esto lo hacemos especificando transition-property: background:.

En este otro veremos cómo mover o reubicar un elemento utilizando la propiedad transition-property sobre la propiedad left; pero no ocurrirá lo mismo con la propiedad background la cual NO la agregamos en la propiedad transition-property.

Este ejemplo es poco práctico, ya que para que se activen las transiciones en todos los casos es necesario la presencia de estado hover, lo que quiere que debemos de posicionar el cursor del ratón encima del elemento (o grupo de elementos) en cuestión para que funcione la transición; sin embargo ser la regla indicar que el elemento se desplace de una posición a otra, se pierde el foco sobre el mismo dando como resultados algunos comportamientos erráticos como podrás consultar tu mismo si abres la web por ejemplo Google Chrome y/o en Firefox que se ejecutan de manera incorrecta y difieren entre sí.

Cambiar tamaño, color y opacidad

.card {
 width: 200px;
 background: #ccc;
 transition: transform 0.3s, opacity 0.3s;
}
.card:hover {
 transform: scale(1.1);
 opacity: 0.8;
}

Cómo aplicar transiciones CSS a elementos creados con JavaScript

Por defecto, una transición no se ejecuta al crear un elemento nuevo. Para solucionarlo:

setTimeout(() => {
 elemento.classList.add('show');
}, 0);

Este pequeño detalle marca la diferencia entre una transición que funciona y otra que parece “rota”.

Buenas prácticas: accesibilidad y rendimiento en transiciones CSS

Uso de prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
 * {
   transition: none;
 }
}

No todo el mundo tolera bien las animaciones, y este detalle mejora la accesibilidad.

Consejos de rendimiento

• Prioriza transform y opacity
• Evita animar layout (width, height)
• Usa transiciones solo cuando aporten valor real

Cuándo usar transiciones CSS y cuándo no

• Las transiciones CSS son ideales para:
  • Botones y enlaces
  • Menús desplegables
  • Galerías
  • Estados interactivos
• No son la mejor opción cuando necesitas:
  • Secuencias complejas
  • Control total del timeline
  • Animaciones sincronizadas

En esos casos, @keyframes o JavaScript encajan mejor.

El uso de la función step en las animaciones y transiciones en CSS

Las animaciones y transiciones son uno de los grandes cambios que trae CSS3 con sigo y son un sustituto ideal a las animaciones clásicas creadas mediante JavaScript; la función steps() permite controlar el movimiento de las animaciones y transiciones indicando el número de "frame" o saltos del cual queremos que conste una animación o transiciones en CSS.

En otras palabras; permite romper las animaciones o transiciones en segmentos o trozos.

Transición en CSS con cuatro frames

En este primer ejemplo veremos cómo variar el nivel de transparencia de un elementos progresivamente (a través de las transiciones en CSS) en un segundo de forma progresiva en cuatro partes; es decir:

• 1ms: 1.00
• 250ms: 0.75
• 500ms: 0.50
• 750ms: 0.25
• 1000ms: 0

Serán los niveles de opacidad que tendrá el color de fondo en el transcurso de un segundo en 4 "frames" en la transición:

Parte del CSS empleado es el siguiente:

section .circle{
 background: rgba(200,200,200,1); 
 transition: background 1s steps(4);
}

Este otro muestra como quedaría nuestro ejemplo si no empleásemos la función steps() o las transiciones "clásicas":

Como podemos ver en el CSS anterior, la función steps() permite establecer el número de saltos en un tiempo determinado; para el ejemplo anterior se dieron cuatro pasos en 1000 milisegundos (1 segundo).

Animaciones con steps en CSS

Inclusive es posible emplear la función steps() en las animaciones en CSS por ejemplo si quisiéramos rotar una imagen en 4 segundos 360 grados en 4 pasos; es decir:

• 0s: 0 grados
• 1s: 90 grados
• 2s: 180 grados
• 3s: 270 grados
• 4s: 360 grados

Parte del CSS empleado es el siguiente:

.car {
   animation: rotation-car 4s steps(4) infinite;
}

Creando un reloj con CSS

En esta parte veremos como crear un sencillo reloj segundero empleando los steps() para no ejecutar movimientos continuos como ocurriría si no se emplearan los steps():

Reloj analógico con CSS

Mediante el valor steps() establecidos en 60 saltos:

.circle-clock .second {
	transform-origin: 100% 50%;
	animation: circle-clock 60s steps(60) infinite;
}

El truco es ver que la animación se debe de ejecutar en 60 segundos (hasta que vuelva a repetirse) se debe de realizar en 60 frames o lo que es lo mismo, un segundo por frame; con esto se consigue el "efecto" de un reloj analógico tradicional que solo marca segundos.

¿Qué es lo que se anima?

La mano del reloj va girando desde los 0 grados hasta los 360 en 60 segundos; finalmente el ejemplo:

Transición CSS en elementos agregados dinámicamente a través de JavaScript

Por defecto, cuando creamos un elemento HTML y tiene asignada una transición, la transición CSS no se ejecuta; para que se ejecute, podemos agregar un pequeño retraso; por ejemplo, tomando este fragmento de código de nuestro curso y libro sobre transiciones y animaciones creativas en CSS, tenemos un contenedor:

.box {
    background: #5544AA;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 600px;
    height: 300px;
    margin-top: 10px;
    border-radius: 5px;
    transform: translateX(600%);
    transition: transform 0.4s;
}
.box.show{
    transform: translateX(0);
}

Y para que podamos agregar la transición en CSS una vez creado el HTML:

document.querySelector('.container').innerHTML += '<div class="box show"><h1>Content</h1></div>'

Agregamos un pequeño retardo; en este ejemplo, la última caja es la que se agrega con el script anterior:

 setTimeout(function () {
        document.querySelectorAll('.container .box')[document.querySelectorAll('.container .box').length - 1].classList.add("show");
    }, 0)

Mostrando transiciones de imágenes como fondo con CSS

Mostrar transiciones suaves de imágenes en el fondo de una página HTML es realmente sencillo; realizar este tipo de transiciones es una práctica común en la web y en múltiples aplicaciones como Flipboard para Android; en esta entrada veremos una forma simple de realizar estas transiciones.

El truco aquí es emplear imágenes un poco más grandes a la resolución de la pantalla del usuario (monitor, tableta teléfono ,etc); como se te habría podido ocurrir…

Consiste en emplear los media queries de CSS para seleccionar la imagen que mejor se adapte a la resolución del usuario.

¿Porqué emplear imágenes con mayor resolución de la pantalla?

Al colocar una imagen como fondo con mayor resolución que la pantalla:

Parte de la misma no es presentada o no se encuentra oculta, debido a que la pantalla no puede mostrar el total de la imagen; aun así es posible mostrar estas zonas ocultas empleando la propiedad:

background-position 

Dicha propiedad puede recibir hasta dos valores los cuales permite desplazar la imagen en los ejes horizontal:

Y vertical:

Para ello podemos emplear medidas como píxeles, porcentajes o incluso valores no numéricos como:

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

Por ejemplo:

background-position: right bottom;

Con esto en mente podemos mover fácilmente una imagen de un lado a otro de forma progresiva a través de las animaciones y empleando principalmente la propiedad vista anteriormente:

@keyframes transitionImage {
    0% {background-position: right bottom;background-image: url('tigre.jpg');opacity:1;}
    20% {background-position: 0 0;opacity:0.5;background-image: url('chita.jpg');}
    30% {}
    35% {opacity:1;}
    50% {background-position:left bottom; opacity:0.5;background-image: url('leon.jpg');}
    60% {}
    65% {opacity:1;}
    80% {background-position:right top; opacity:0.5;background-image: url('tigre.jpg');}
    90% {}
    100% {background-position: right bottom;opacity:1;}
}

Para simplificar el experimento anterior no emplearemos los media queries aunque pueden ser fácilmente adaptados al CSS presentado anteriormente; es decir, basta con definir el los @keyframes dentro de los media queries.

Ejemplos de Transiciones en CSS

En el blog, tenemos multitud de otros experimentos con las transiciones en CSS para hacer cambios suaves, te dejo algunos por aquí:

• Estilos radio button CSS: cómo crear radio buttons personalizados y animados sin JavaScript
• Estilos para checkbox personalizado en CSS
• Efectos con hover y transition en CSS en imágenes
• Efectos interesantes que se pueden lograr con listas en CSS
• Diseño de botones con fondo corredizo en HTML y CSS
• Cómo crear un botón o menú tipo hamburguesa animado con CSS y un poco de HTML
• Creando una sencilla barra de progreso con solo CSS: interactiva y sin JavaScript

Preguntas frecuentes sobre transiciones en HTML y CSS

• ¿Por qué no funciona mi transición CSS?
  • Normalmente porque no hay cambio de estado o la propiedad no es animable.
• ¿Qué diferencia hay entre transition y animation?
  • transition va de un estado a otro; animation permite múltiples estados.
• ¿Se pueden usar transiciones sin hover?
  • Sí, usando focus, checked o clases dinámicas.
• ¿Qué propiedades no se pueden animar?
  • Por ejemplo, font-family o valores que no tengan estados intermedios claros.

Conclusión

Como pudimos ver a lo largo del artículo; esta propiedad la podemos utilizar cuando deseemos realizar transiciones graduales entre distintos estilos aplicados a un elemento en instantes de tiempo distintos sin utilizar una sola línea de JavaScript; es perfecta para aplicarla galerías de imágenes, menús de navegación con sub-menus, etc, ya que mejora notablemente la experiencia que el usuario pueda tener.

Allí podrás ver efectos reversibles, que básicamente son aquellos que hace rotar el elemento sobre su eje ya sea para simular abrir una puerta o mostrar marcadores; también como crear checkbox con una transición al momento de pasar de activo a inactivo y otra función muy interesante que no hemos abordado en este tutorial que es el uso de la función step para marcar el número de pasos necesarios para completar la transición; todo esto con ejemplos detallados.