CSS
Tutorial CSS: Transiciones
Aprende a controlar transiciones en CSS: propiedades animables, duración, funciones de temporización y retrasos para interfaces fluidas y profesionales.
Aprende CSS y certifícatePropiedades 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
yvisibility
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ú:
- El color del texto cambia inmediatamente
- El color de fondo comienza a cambiar después de 0.1 segundos
- El movimiento horizontal comienza después de 0.2 segundos
- 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:
- La tarjeta se eleva ligeramente
- La imagen se amplía suavemente
- El título y el precio se desplazan ligeramente
- 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.
Ejercicios de esta lección Transiciones
Evalúa tus conocimientos de esta lección Transiciones con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Reto modelo caja CSS
Propiedades de posicionamiento
Modelo de caja
Sombras en texto y cajas
Reto implementación de fuentes web
Sintaxis básica
Estilos de fuente
Diseño responsive con media queries
Animaciones y transiciones
Proyecto CSS Landing page simple
Reto unidades de medida
Propiedades de texto
Metodologías BEM, SMACSS, OOCSS
Herencia y cascada
Sintaxis avanzada
Reto fondos background CSS
Reto sintaxis CSS
Flexbox en diseños modernos
Elementos 'float' y 'clear'
Pseudo-clases y pseudo-elementos
Reto grid de columnas en CSS
Selectores avanzados
Reto componente responsive
Reto formulario estilizado
Proyecto CSS crear una navbar
Proyecto CSS Dashboard Responsive
Reto Flexbox Hero
Propiedades de fondo
Introducción a CSS
Reto selectores básicos CSS
Reto Flexbox Card
Reto propiedades texto
Modelo de caja
Propiedad 'display'
Variables en CSS
Grid en diseños de cuadrícula
Selectores básicos
Reto tema claro/oscuro con variables
Reto especificidad y cascada
Todas las lecciones de CSS
Accede a todas las lecciones de CSS y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Css
Introducción Y Entorno
Entorno Para Desarrollar Css
Introducción Y Entorno
Sintaxis
Sintaxis De Selectores Y Propiedades
Selectores Básicos
Sintaxis De Selectores Y Propiedades
Herencia Y Cascada
Sintaxis De Selectores Y Propiedades
Pseudo-clases Y Pseudo-elementos
Sintaxis De Selectores Y Propiedades
Colores En Css
Sintaxis De Selectores Y Propiedades
Unidades De Medida
Sintaxis De Selectores Y Propiedades
Especificidad
Sintaxis De Selectores Y Propiedades
Estilos De Fuente
Estilización De Texto Y Fondo
Propiedades De Texto
Estilización De Texto Y Fondo
Sombras En Texto Y Cajas
Estilización De Texto Y Fondo
Propiedades De Fondo
Estilización De Texto Y Fondo
Fuentes Web
Estilización De Texto Y Fondo
Efectos De Texto: Gradientes, Recortes
Estilización De Texto Y Fondo
Tipografía Avanzada
Estilización De Texto Y Fondo
Modelo De Caja
Modelo Caja
Propiedades De Posicionamiento
Modelo Caja
Propiedad 'Display'
Modelo Caja
Elementos 'Float' Y 'Clear'
Modelo Caja
Rellenos Y Márgenes
Modelo Caja
Bordes Y Contornos
Modelo Caja
Absolute, Fixed, Sticky Y Z-index
Posicionamiento
Flexbox Para Crear Layouts Y Estructuras
Flexbox
Css Grid Para Crear Layouts Y Estructuras
Flexbox
Propiedades Del Contenedor Flex
Flexbox
Propiedades De Los Items Flex
Flexbox
Columnas Y Filas En Grid
Css Grid
Espaciado Y Alineación
Css Grid
Tipografía Responsive
Diseño Responsive
Fundamentos Del Diseño Responsive
Diseño Responsive
Imágenes Responsive
Diseño Responsive
Funciones Matemáticas
Variables Y Funciones Css
Transformaciones 2d
Transformación, Transición, Animación
Transformaciones 3d
Transformación, Transición, Animación
Animaciones
Transformación, Transición, Animación
Transiciones
Transformación, Transición, Animación
Css Para Formularios
Css Avanzado
Accesibilidad Web Con Css
Css Avanzado
Container Queries
Css Avanzado
Selectores Avanzados
Css Avanzado
Animaciones Y Transiciones
Técnicas Modernas Y Metodologías
Variables En Css
Técnicas Modernas Y Metodologías
Diseño Responsive Con Media Queries
Técnicas Modernas Y Metodologías
Metodologías De Escritura En Css
Técnicas Modernas Y Metodologías
En esta lección
Objetivos de aprendizaje de esta lección
- Identificar qué propiedades CSS son animables, no animables o parcialmente animables.
- Comprender cómo controlar la duración de las transiciones con transition-duration.
- Aplicar funciones de temporización para modificar la velocidad y el ritmo de las transiciones usando transition-timing-function.
- Utilizar transition-delay para gestionar retrasos y crear efectos secuenciales en animaciones múltiples.
- Optimizar animaciones para mejorar el rendimiento y la experiencia de usuario en diferentes dispositivos.