Tutorial CSS: Transiciones

Propiedades animables y no animables en CSS

Cuando trabajamos con transiciones en CSS, es fundamental entender que no todas las propiedades pueden animarse. Conocer qué propiedades son animables y cuáles no lo son nos permitirá crear efectos visuales más eficientes y evitar frustraciones durante el desarrollo.

Las propiedades animables son aquellas que pueden cambiar gradualmente de un valor a otro a través del tiempo, creando un efecto visual fluido. Por otro lado, las propiedades no animables solo pueden cambiar de forma instantánea, sin transición intermedia.

Propiedades animables comunes

La mayoría de propiedades que afectan a la apariencia visual de un elemento pueden animarse. Algunas de las más utilizadas son:

• Dimensiones: width, height, max-width, min-height, etc.
• Posicionamiento: top, right, bottom, left
• Márgenes y rellenos: margin, padding y todas sus variantes
• Colores: color, background-color, border-color, outline-color
• Opacidad: opacity
• Transformaciones: transform (scale, rotate, translate, skew)
• Sombras: box-shadow, text-shadow

Veamos un ejemplo básico de cómo animar algunas de estas propiedades:

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  opacity: 0.7;
  transition: width 0.5s, background-color 0.5s, opacity 0.5s;
}

.box:hover {
  width: 200px;
  background-color: #e74c3c;
  opacity: 1;
}

En este ejemplo, al pasar el cursor sobre el elemento, su ancho, color de fondo y opacidad cambiarán gradualmente durante 0.5 segundos.

Propiedades no animables

Algunas propiedades no pueden animarse debido a su naturaleza discreta o binaria. Entre ellas se encuentran:

• display: No puede transicionar entre valores como 'none', 'block', 'flex', etc.
• font-family: No es posible crear una transición entre diferentes familias de fuentes
• position: No se puede animar el cambio entre 'static', 'relative', 'absolute', etc.
• float: No permite transiciones entre 'left', 'right' y 'none'
• text-align: No se puede animar el cambio entre alineaciones de texto
• vertical-align: No permite transiciones entre sus valores

Por ejemplo, si intentamos animar la propiedad display:

.box {
  display: none;
  transition: display 0.5s; /* Esto no funcionará */
}

.box:hover {
  display: block;
}

El cambio ocurrirá de forma instantánea, sin transición, porque display no es una propiedad animable.

Alternativas para propiedades no animables

Para algunas propiedades no animables existen alternativas que permiten lograr efectos similares:

• En lugar de display: Usa opacity y visibility juntas

.box {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0s 0.5s;
}

.box:hover {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s;
}

• En lugar de height: auto: Usa max-height con un valor suficientemente grande

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.accordion:hover .accordion-content {
  max-height: 500px; /* Valor mayor que el contenido real */
}

Propiedades parcialmente animables

Algunas propiedades son parcialmente animables, lo que significa que solo ciertos valores o componentes pueden transicionar suavemente:

• background-image: No se puede animar entre imágenes diferentes, pero sí entre gradientes
• grid y flex: Algunas subpropiedades son animables, otras no

/* Animación entre gradientes (funciona) */
.gradient-box {
  background-image: linear-gradient(to right, blue, green);
  transition: background-image 0.5s;
}

.gradient-box:hover {
  background-image: linear-gradient(to right, red, orange);
}

/* Animación entre imágenes (no funciona) */
.image-box {
  background-image: url('image1.jpg');
  transition: background-image 0.5s; /* No tendrá efecto */
}

.image-box:hover {
  background-image: url('image2.jpg');
}

Verificación de propiedades animables

Para saber si una propiedad específica es animable, podemos consultar la documentación oficial o utilizar esta regla general: las propiedades que aceptan valores numéricos o colores suelen ser animables, mientras que las que tienen valores discretos o categóricos generalmente no lo son.

La lista completa de propiedades animables puede consultarse en la especificación CSS Transitions, pero algunas de las más comunes que sí son animables incluyen:

/* Ejemplos de propiedades animables */
.element {
  /* Dimensiones */
  width: 100px;
  height: 100px;
  
  /* Espaciado */
  margin: 10px;
  padding: 15px;
  
  /* Colores y apariencia */
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
  opacity: 0.8;
  
  /* Transformaciones */
  transform: scale(1) rotate(0deg);
  
  /* Transición para todas estas propiedades */
  transition: all 0.3s ease;
}

Rendimiento de las animaciones

No todas las propiedades animables tienen el mismo impacto en el rendimiento. Las propiedades que afectan al layout (como width, height, padding) son más costosas de animar que aquellas que no lo hacen (como opacity, transform).

Para obtener animaciones más fluidas, especialmente en dispositivos móviles, es recomendable priorizar las propiedades:

• transform: Para cambios de tamaño, posición y rotación
• opacity: Para aparecer/desaparecer elementos
• filter: Para efectos visuales

/* Animación eficiente (no causa recalculo de layout) */
.efficient-box {
  transform: translateX(0);
  opacity: 0.5;
  transition: transform 0.3s, opacity 0.3s;
}

.efficient-box:hover {
  transform: translateX(50px);
  opacity: 1;
}

/* Animación menos eficiente (causa recalculo de layout) */
.inefficient-box {
  margin-left: 0;
  height: 100px;
  transition: margin-left 0.3s, height 0.3s;
}

.inefficient-box:hover {
  margin-left: 50px;
  height: 150px;
}

Conocer qué propiedades son animables y cuáles ofrecen mejor rendimiento nos permitirá crear interfaces más fluidas y profesionales. En las siguientes secciones veremos cómo controlar la duración, temporización y retraso de estas transiciones para lograr efectos más sofisticados.

Control de duración con transition-duration

La propiedad transition-duration es fundamental para controlar el tiempo que tarda una transición en completarse. Esta propiedad determina cuánto durará el cambio gradual entre el estado inicial y final de un elemento, permitiéndonos crear efectos visuales más naturales y agradables.

El valor de transition-duration se especifica en segundos (s) o milisegundos (ms), siendo ambas unidades de tiempo válidas en CSS. Por defecto, si no especificamos esta propiedad, su valor será 0s, lo que significa que el cambio ocurrirá instantáneamente sin transición.

Sintaxis básica

La sintaxis para definir la duración de una transición es muy sencilla:

.elemento {
  transition-duration: tiempo;
}

Donde "tiempo" puede expresarse en segundos o milisegundos:

.elemento {
  transition-duration: 0.5s;    /* medio segundo */
  /* o */
  transition-duration: 500ms;   /* 500 milisegundos (equivalente) */
}

Aplicando duraciones a elementos

Veamos un ejemplo práctico donde controlamos la duración de una transición de color:

.boton {
  background-color: #3498db;
  padding: 10px 20px;
  color: white;
  border: none;
  border-radius: 4px;
  transition-property: background-color;
  transition-duration: 0.3s;
}

.boton:hover {
  background-color: #2980b9;
}

En este ejemplo, el cambio de color de fondo tardará 0.3 segundos en completarse cuando el usuario pase el cursor sobre el botón.

Duraciones múltiples

Cuando aplicamos transiciones a múltiples propiedades, podemos asignar duraciones diferentes a cada una de ellas. Para esto, especificamos varios valores separados por comas:

.tarjeta {
  width: 200px;
  background-color: #f1c40f;
  transform: scale(1);
  transition-property: width, background-color, transform;
  transition-duration: 0.2s, 0.5s, 0.8s;
}

.tarjeta:hover {
  width: 250px;
  background-color: #e67e22;
  transform: scale(1.05);
}

En este ejemplo:

• La transición del ancho durará 0.2 segundos
• El cambio de color de fondo tardará 0.5 segundos
• La transformación de escala se completará en 0.8 segundos

Si especificamos menos duraciones que propiedades, los valores se repetirán cíclicamente:

.elemento {
  transition-property: width, height, color, background-color;
  transition-duration: 0.3s, 0.6s; /* Se aplicará: 0.3s, 0.6s, 0.3s, 0.6s */
}

Duración y la propiedad abreviada transition

En la práctica, a menudo utilizamos la propiedad abreviada transition que combina varias propiedades de transición en una sola declaración:

.elemento {
  /* Sintaxis: transition: property duration timing-function delay; */
  transition: background-color 0.5s ease 0s;
}

Si queremos aplicar la misma duración a todas las propiedades animables, podemos usar:

.elemento {
  transition: all 0.4s;
}

Seleccionando la duración adecuada

La elección de la duración apropiada depende del tipo de interacción y del tamaño del cambio:

• Transiciones rápidas (0.1s - 0.3s): Ideales para respuestas inmediatas como cambios de color en botones o enlaces.
• Transiciones medias (0.3s - 0.6s): Adecuadas para la mayoría de los efectos de interfaz como expansiones, desplazamientos cortos.
• Transiciones lentas (0.6s - 1s): Mejores para cambios más dramáticos o para enfatizar un elemento.
• Transiciones muy lentas (>1s): Usar con moderación, pueden hacer que la interfaz se sienta lenta.

Veamos ejemplos de diferentes duraciones:

/* Ejemplo de diferentes duraciones para distintos tipos de elementos */
.boton-accion {
  background-color: #2ecc71;
  transition-duration: 0.2s; /* Rápida para respuesta inmediata */
}

.panel-informacion {
  height: 0;
  overflow: hidden;
  transition-duration: 0.5s; /* Media para expansión de contenido */
}

.imagen-destacada {
  opacity: 0.7;
  transform: scale(1);
  transition-duration: 0.8s; /* Más lenta para efecto dramático */
}

Consideraciones de rendimiento

Es importante tener en cuenta que las duraciones muy largas pueden afectar negativamente la experiencia del usuario:

• Las transiciones demasiado lentas pueden hacer que la interfaz se sienta poco receptiva
• Las transiciones muy rápidas pueden pasar desapercibidas
• Para dispositivos móviles, considera usar duraciones ligeramente más cortas para mejorar la percepción de velocidad

/* Ajuste de duraciones para diferentes dispositivos */
.elemento {
  transition-duration: 0.4s;
}

@media (max-width: 768px) {
  .elemento {
    transition-duration: 0.3s; /* Ligeramente más rápido en móviles */
  }
}

Ejemplo práctico: Menú desplegable

Veamos un ejemplo completo de un menú desplegable con diferentes duraciones:

.menu-item {
  position: relative;
}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  
  /* Diferentes duraciones para distintas propiedades */
  transition-property: max-height, opacity;
  transition-duration: 0.5s, 0.3s;
}

.menu-item:hover .submenu {
  max-height: 300px;
  opacity: 1;
}

En este ejemplo, la expansión del submenú (max-height) tarda 0.5 segundos, mientras que el cambio de opacidad es más rápido, completándose en 0.3 segundos. Esto crea un efecto donde el submenú comienza a aparecer rápidamente pero termina de expandirse un poco después.

Transiciones en entrada y salida

Un aspecto interesante es que podemos definir duraciones diferentes para la transición de entrada y salida:

.tooltip {
  opacity: 0;
  transform: translateY(10px);
  transition-duration: 0.3s;
}

.tooltip-trigger:hover .tooltip {
  opacity: 1;
  transform: translateY(0);
}

/* Duración más larga para la salida */
.tooltip-trigger .tooltip {
  transition-duration: 0.5s;
}

En este ejemplo, la transición de entrada (al hacer hover) dura 0.3 segundos, mientras que la transición de salida (al quitar el hover) dura 0.5 segundos, creando un efecto de desvanecimiento más suave.

La propiedad transition-duration es una herramienta esencial para controlar el ritmo y la fluidez de nuestras interfaces. Combinada con otras propiedades de transición, nos permite crear experiencias de usuario más refinadas y profesionales.

Funciones de temporización con transition-timing-function

Las transiciones en CSS no solo se definen por su duración, sino también por cómo evolucionan a lo largo del tiempo. La propiedad transition-timing-function nos permite controlar la velocidad de una transición en diferentes puntos de su recorrido, añadiendo personalidad y naturalidad a nuestras animaciones.

Esta propiedad determina la curva de aceleración que seguirá la transición, permitiéndonos crear efectos que imitan movimientos naturales como rebotes, aceleraciones o desaceleraciones.

Valores predefinidos

CSS incluye varias funciones de temporización predefinidas que podemos usar directamente:

• ease: Comienza lento, acelera y termina lentamente (valor por defecto)
• linear: Velocidad constante de principio a fin
• ease-in: Comienza lento y termina rápido
• ease-out: Comienza rápido y termina lento
• ease-in-out: Similar a ease, pero con una aceleración y desaceleración más pronunciadas

Veamos cómo aplicar estas funciones a un elemento:

.boton {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}

.boton:hover {
  transform: scale(1.1);
}

En este ejemplo, el botón se expandirá con un efecto ease-out al pasar el cursor sobre él, comenzando rápidamente y desacelerando hacia el final.

Comparación visual de funciones de temporización

Para entender mejor cómo afecta cada función al movimiento, podemos visualizar su comportamiento en un ejemplo práctico:

.caja {
  width: 50px;
  height: 50px;
  background-color: #e74c3c;
  position: relative;
  left: 0;
  transition-property: left;
  transition-duration: 2s;
}

.contenedor:hover .linear { 
  left: 250px; 
  transition-timing-function: linear;
}

.contenedor:hover .ease-in { 
  left: 250px; 
  transition-timing-function: ease-in;
}

.contenedor:hover .ease-out { 
  left: 250px; 
  transition-timing-function: ease-out;
}

.contenedor:hover .ease-in-out { 
  left: 250px; 
  transition-timing-function: ease-in-out;
}

Funciones cubic-bezier

Para un control más preciso sobre la curva de temporización, podemos utilizar la función cubic-bezier(). Esta función nos permite definir nuestra propia curva de aceleración mediante cuatro valores que representan puntos de control:

.elemento {
  transition-timing-function: cubic-bezier(x1, y1, x2, y2);
}

Donde:

• x1, y1: Coordenadas del primer punto de control
• x2, y2: Coordenadas del segundo punto de control

Los valores x van de 0 a 1 (representando el tiempo), mientras que los valores y pueden exceder este rango para crear efectos más dramáticos.

.boton-personalizado {
  background-color: #9b59b6;
  transition-property: background-color;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.boton-personalizado:hover {
  background-color: #8e44ad;
}

En este ejemplo, la función cubic-bezier crea un efecto ligeramente elástico, donde la transición sobrepasa brevemente su destino antes de establecerse.

Funciones de pasos (steps)

Otra opción interesante es la función steps(), que crea transiciones escalonadas en lugar de suaves. Esta función es útil para crear animaciones por fotogramas o efectos de texto de máquina de escribir:

.steps-function {
  transition-timing-function: steps(número_de_pasos, dirección);
}

Donde:

• número_de_pasos: Cantidad de pasos discretos
• dirección: start (salta al inicio) o end (salta al final, valor por defecto)

.texto-maquina {
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #333;
  animation: escribir 3s steps(20, end) forwards;
}

@keyframes escribir {
  from { width: 0; }
  to { width: 100%; }
}

Este ejemplo crea un efecto de texto escribiéndose carácter por carácter, dividiendo la animación en 20 pasos discretos.

Palabras clave adicionales

CSS también ofrece algunas palabras clave específicas para la función steps:

• step-start: Equivalente a steps(1, start)
• step-end: Equivalente a steps(1, end)

.interruptor {
  background-color: #e74c3c;
  transition-property: background-color;
  transition-duration: 0.3s;
  transition-timing-function: step-end;
}

.interruptor:hover {
  background-color: #2ecc71;
}

En este ejemplo, el cambio de color ocurrirá de forma instantánea al final de la duración, sin transición gradual.

Combinando múltiples funciones de temporización

Al igual que con otras propiedades de transición, podemos especificar diferentes funciones de temporización para distintas propiedades:

.tarjeta {
  background-color: #f1c40f;
  transform: scale(1) rotate(0deg);
  opacity: 1;
  transition-property: background-color, transform, opacity;
  transition-duration: 0.5s, 0.8s, 0.3s;
  transition-timing-function: ease, cubic-bezier(0.175, 0.885, 0.32, 1.275), linear;
}

.tarjeta:hover {
  background-color: #e67e22;
  transform: scale(1.05) rotate(5deg);
  opacity: 0.9;
}

En este ejemplo:

• El color de fondo cambia con la función ease
• La transformación utiliza una función cubic-bezier personalizada con un ligero efecto de rebote
• La opacidad cambia de forma lineal

Uso de la propiedad abreviada transition

En la práctica, normalmente utilizamos la propiedad abreviada transition que incluye la función de temporización:

.elemento {
  /* Sintaxis: transition: property duration timing-function delay; */
  transition: background-color 0.5s ease-in-out 0s;
}

Para múltiples transiciones:

.elemento-multiple {
  transition: 
    background-color 0.3s ease,
    transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55),
    opacity 0.2s linear;
}

Seleccionando la función adecuada

La elección de la función de temporización depende del tipo de movimiento que queramos simular:

• linear: Ideal para rotaciones continuas o cambios constantes
• ease-in: Adecuado para elementos que salen de la pantalla o desaparecen
• ease-out: Perfecto para elementos que entran en pantalla o aparecen
• ease-in-out: Excelente para movimientos que comienzan y terminan en reposo
• cubic-bezier personalizados: Para efectos especiales como rebotes o elásticos

/* Botón con efecto de rebote */
.boton-rebote {
  transform: scale(1);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.boton-rebote:hover {
  transform: scale(1.1);
}

/* Elemento que se desvanece suavemente */
.elemento-fade {
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

.elemento-fade:hover {
  opacity: 0.5;
}

Herramientas para crear funciones personalizadas

Crear funciones cubic-bezier a mano puede ser complicado. Afortunadamente, existen herramientas online que nos permiten visualizar y ajustar estas curvas:

• Chrome DevTools incluye un editor visual de cubic-bezier
• Sitios web como cubic-bezier.com permiten experimentar con diferentes curvas

Ejemplo práctico: Menú con diferentes efectos

Veamos un ejemplo completo de un menú donde cada elemento tiene una función de temporización diferente:

.menu-item {
  padding: 10px 15px;
  background-color: #3498db;
  color: white;
  margin: 5px;
  transition-property: transform, background-color;
  transition-duration: 0.4s;
}

.menu-item:nth-child(1) {
  transition-timing-function: ease;
}

.menu-item:nth-child(2) {
  transition-timing-function: ease-in-out;
}

.menu-item:nth-child(3) {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.menu-item:nth-child(4) {
  transition-timing-function: steps(4, end);
}

.menu-item:hover {
  transform: translateX(10px);
  background-color: #2980b9;
}

En este ejemplo, cada elemento del menú se mueve de manera diferente al pasar el cursor sobre él, creando una experiencia interactiva única.

Las funciones de temporización son una herramienta poderosa para añadir personalidad y naturalidad a nuestras transiciones. Combinadas con las propiedades de duración y retraso, nos permiten crear interfaces más dinámicas y atractivas que mejoran significativamente la experiencia del usuario.

Retraso y transiciones múltiples con transition-delay

La propiedad transition-delay nos permite controlar cuándo comienza una transición después de que se produce un cambio de estado. Este retraso añade una dimensión temporal adicional a nuestras animaciones, permitiéndonos crear secuencias más complejas y efectos escalonados.

El valor de transition-delay se especifica, al igual que transition-duration, en segundos (s) o milisegundos (ms). Por defecto, su valor es 0s, lo que significa que la transición comienza inmediatamente cuando se detecta un cambio.

Sintaxis básica

La sintaxis para definir el retraso de una transición es muy sencilla:

.elemento {
  transition-delay: tiempo;
}

Donde "tiempo" puede expresarse en segundos o milisegundos:

.elemento {
  transition-delay: 0.2s;    /* retraso de dos décimas de segundo */
  /* o */
  transition-delay: 200ms;   /* 200 milisegundos (equivalente) */
}

Aplicando retrasos simples

Veamos un ejemplo básico donde añadimos un retraso a una transición:

.tarjeta {
  background-color: #3498db;
  transform: translateY(0);
  transition-property: background-color, transform;
  transition-duration: 0.4s;
  transition-timing-function: ease;
  transition-delay: 0.2s;
}

.tarjeta:hover {
  background-color: #2980b9;
  transform: translateY(-10px);
}

En este ejemplo, cuando el usuario pasa el cursor sobre la tarjeta, la transición no comenzará inmediatamente, sino después de 0.2 segundos, creando una respuesta ligeramente retardada que puede resultar más natural en ciertos contextos.

Retrasos negativos

Una característica interesante de transition-delay es que podemos usar valores negativos. Esto hace que la transición comience inmediatamente, pero desde un punto intermedio de su progreso:

.boton-rapido {
  background-color: #e74c3c;
  transition-property: background-color;
  transition-duration: 0.5s;
  transition-delay: -0.25s;
}

.boton-rapido:hover {
  background-color: #c0392b;
}

En este ejemplo, la transición tiene una duración total de 0.5 segundos, pero con un retraso de -0.25 segundos. Esto significa que cuando comienza la transición, ya ha "transcurrido" la mitad del tiempo, por lo que solo veremos la segunda mitad del efecto, haciendo que parezca más rápido.

Transiciones múltiples con diferentes retrasos

La verdadera potencia de transition-delay se manifiesta cuando aplicamos diferentes retrasos a múltiples propiedades, creando efectos secuenciales:

.menu-item {
  color: #333;
  background-color: #f5f5f5;
  transform: translateX(0);
  opacity: 1;
  
  transition-property: color, background-color, transform, opacity;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  transition-delay: 0s, 0.1s, 0.2s, 0.3s;
}

.menu-item:hover {
  color: #fff;
  background-color: #3498db;
  transform: translateX(10px);
  opacity: 0.9;
}

En este ejemplo, cuando el usuario pasa el cursor sobre el elemento del menú:

1. El color del texto cambia inmediatamente
2. El color de fondo comienza a cambiar después de 0.1 segundos
3. El movimiento horizontal comienza después de 0.2 segundos
4. La opacidad empieza a cambiar después de 0.3 segundos

Este efecto escalonado crea una sensación de movimiento más orgánica y dirigida.

Usando la propiedad abreviada transition

En la práctica, normalmente utilizamos la propiedad abreviada transition que incluye el retraso como su cuarto valor:

.elemento {
  /* Sintaxis: transition: property duration timing-function delay; */
  transition: background-color 0.5s ease-in-out 0.2s;
}

Para múltiples transiciones con diferentes retrasos:

.elemento-secuencial {
  transition: 
    color 0.3s ease 0s,
    background-color 0.4s ease 0.1s,
    transform 0.5s ease-out 0.2s;
}

Efectos de cascada con transition-delay

Una aplicación común de los retrasos escalonados es crear efectos de cascada en listas o grupos de elementos:

.lista-animada li {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.lista-animada:hover li {
  opacity: 1;
  transform: translateY(0);
}

/* Aplicamos retrasos incrementales a cada elemento */
.lista-animada:hover li:nth-child(1) { transition-delay: 0s; }
.lista-animada:hover li:nth-child(2) { transition-delay: 0.1s; }
.lista-animada:hover li:nth-child(3) { transition-delay: 0.2s; }
.lista-animada:hover li:nth-child(4) { transition-delay: 0.3s; }
.lista-animada:hover li:nth-child(5) { transition-delay: 0.4s; }

Este código crea un efecto donde los elementos de la lista aparecen secuencialmente cuando el usuario pasa el cursor sobre el contenedor.

Retrasos diferentes para entrada y salida

Al igual que con otras propiedades de transición, podemos definir retrasos diferentes para la transición de entrada y salida:

.notificacion {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.3s, transform 0.3s;
  transition-delay: 0s;
}

.mostrar-notificacion .notificacion {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s; /* Retraso solo para la entrada */
}

En este ejemplo, la notificación aparece con un retraso de 0.2 segundos, pero desaparece inmediatamente cuando se elimina la clase "mostrar-notificacion".

Combinando retrasos con diferentes duraciones

Para crear efectos más sofisticados, podemos combinar diferentes retrasos con diferentes duraciones:

.panel-expandible {
  height: 50px;
  background-color: #3498db;
  color: white;
  overflow: hidden;
  
  /* Propiedades individuales para mayor control */
  transition-property: height, background-color;
  transition-duration: 0.5s, 0.3s;
  transition-timing-function: ease-out, ease;
  transition-delay: 0s, 0.2s;
}

.panel-expandible:hover {
  height: 200px;
  background-color: #2980b9;
}

En este ejemplo:

• La altura comienza a cambiar inmediatamente y tarda 0.5 segundos
• El color de fondo comienza a cambiar después de 0.2 segundos y tarda 0.3 segundos

Ejemplo práctico: Menú de navegación con efecto escalonado

Veamos un ejemplo completo de un menú de navegación donde los elementos secundarios aparecen secuencialmente:

.nav-item {
  position: relative;
}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  
  /* Transición para todos los elementos del submenú */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-item:hover .submenu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Aplicamos retrasos incrementales a cada elemento del submenú */
.submenu-item {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-item:hover .submenu-item:nth-child(1) { transition-delay: 0.05s; }
.nav-item:hover .submenu-item:nth-child(2) { transition-delay: 0.1s; }
.nav-item:hover .submenu-item:nth-child(3) { transition-delay: 0.15s; }
.nav-item:hover .submenu-item:nth-child(4) { transition-delay: 0.2s; }

Este código crea un efecto donde el submenú aparece y luego cada elemento dentro de él aparece secuencialmente, creando una experiencia más dinámica y atractiva.

Creando interfaces interactivas con retrasos calculados

Para interfaces más complejas, podemos usar variables CSS combinadas con transition-delay para crear efectos dinámicos:

:root {
  --base-delay: 0.05s;
}

.galeria-item {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Calculamos el retraso basado en la posición del elemento */
.galeria-item:nth-child(1) { transition-delay: calc(var(--base-delay) * 1); }
.galeria-item:nth-child(2) { transition-delay: calc(var(--base-delay) * 2); }
.galeria-item:nth-child(3) { transition-delay: calc(var(--base-delay) * 3); }
/* ... y así sucesivamente */

.galeria:hover .galeria-item {
  opacity: 1;
  transform: scale(1);
}

Consideraciones de rendimiento y accesibilidad

Al trabajar con retrasos y transiciones múltiples, debemos tener en cuenta algunas consideraciones:

• Rendimiento: Demasiadas transiciones simultáneas pueden afectar el rendimiento, especialmente en dispositivos móviles
• Accesibilidad: Algunos usuarios prefieren reducir o eliminar las animaciones. Respeta la preferencia prefers-reduced-motion:

.elemento {
  transition: transform 0.5s ease 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .elemento {
    transition-duration: 0.1s;
    transition-delay: 0s;
  }
}

• Tiempos de espera: Retrasos demasiado largos pueden hacer que la interfaz se sienta lenta o no responsiva

Ejemplo avanzado: Tarjeta interactiva con múltiples efectos

Para finalizar, veamos un ejemplo más complejo que combina todo lo que hemos aprendido:

.tarjeta-producto {
  position: relative;
  overflow: hidden;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transform: translateY(0);
}

.tarjeta-producto img {
  transform: scale(1);
  transition: transform 0.5s ease 0.1s;
}

.tarjeta-producto .titulo {
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.tarjeta-producto .precio {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.4s ease, opacity 0.4s ease;
  transition-delay: 0.1s;
}

.tarjeta-producto .boton-comprar {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  transition-delay: 0s;
}

/* Estados al hacer hover */
.tarjeta-producto:hover {
  transform: translateY(-5px);
  transition: transform 0.5s ease;
}

.tarjeta-producto:hover img {
  transform: scale(1.05);
}

.tarjeta-producto:hover .titulo {
  transform: translateY(-5px);
}

.tarjeta-producto:hover .precio {
  transform: translateX(-5px);
}

.tarjeta-producto:hover .boton-comprar {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

En este ejemplo, cuando el usuario pasa el cursor sobre la tarjeta de producto:

1. La tarjeta se eleva ligeramente
2. La imagen se amplía suavemente
3. El título y el precio se desplazan ligeramente
4. El botón de compra aparece con un retraso, creando un efecto de revelación secuencial

El uso estratégico de transition-delay, combinado con diferentes duraciones y funciones de temporización, nos permite crear interfaces más dinámicas y atractivas que mejoran significativamente la experiencia del usuario.