Transiciones: propiedad duración temporización
Añada transition para animar suavemente los cambios de propiedades CSS, elija duraciones adecuadas y seleccione funciones de aceleración como ease-in-out.
Transiciones: propiedad duración temporización es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué es una transición CSS?
Una transición CSS anima una propiedad de un valor a otro cuando cambia (al pasar el cursor, al recibir el foco o al alternar una clase). Es declarativa: usted indica a CSS qué propiedades debe transicionar y cómo; el navegador se encarga del resto.
Sintaxis básica
transition: property duration timing-function delay. Puede indicar varias transiciones separadas por comas.
.btn {
background: #6366f1;
transition: background-color 0.2s ease;
}
.btn:hover {
background: #4f46e5;
}
// Browser smoothly animates the colour changeValor de la propiedad
Especifique qué propiedades deben transicionar. Use all para transicionar todas las propiedades animables, pero esto puede activar transiciones no deseadas en propiedades no relacionadas. Sea explícito para mejorar el rendimiento y la previsibilidad.
.card {
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
opacity 0.15s linear;
}
/* Avoid 'all' in most cases */
.risky { transition: all 0.3s; }Duración — Cuánto dura
Indique la duración de la transición en s (segundos) o ms (milisegundos). Use duraciones cortas (100–200 ms) para microinteracciones, medias (200–400 ms) para cambios de estado de componentes y más largas (400 ms o más) para animaciones a nivel de página.
Funciones de temporización — El efecto
Las funciones de temporización controlan la curva de aceleración. Valores habituales: ease (predeterminado: inicio lento, parte central rápida y final lento), linear (velocidad constante), ease-in (comienza lentamente), ease-out (termina lentamente) y ease-in-out. Curvas personalizadas: cubic-bezier(x1, y1, x2, y2).
.btn { transition: transform 0.2s ease-out; }
.toast { transition: opacity 0.3s ease-in-out; }
/* Custom cubic-bezier from cubic-bezier.com: */
.spring { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }Retraso — Cuándo comenzar
Un retraso de transición inicia la animación después de un tiempo especificado. Úselo para escalonar varios elementos o evitar activaciones accidentales al pasar el cursor rápidamente.
.dropdown-menu {
opacity: 0;
transition: opacity 0.2s ease 0.1s; /* 100ms delay */
}
.dropdown:hover .dropdown-menu {
opacity: 1;
}Evento transitionend
JavaScript puede detectar cuándo termina una transición mediante el evento transitionend. Es útil para eliminar elementos después de que desaparezcan gradualmente o activar el siguiente paso de una secuencia.
element.addEventListener('transitionend', (e) => {
if (e.propertyName === 'opacity' && element.style.opacity === '0') {
element.remove();
}
});Transformación de elementos
La propiedad transform está acelerada por la GPU y es ideal para las transiciones. Transformaciones habituales: translate(), scale(), rotate(), skew(). Animar transform y opacity solo activa la composición, que es la ruta más rápida.
.card {
transform: translateY(0) scale(1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}¿Qué se puede transicionar?
Cualquier propiedad con un valor numérico puede transicionarse: opacity, color, transform, width, height, padding, border, font-size. Propiedades como display y visibility no se transicionan suavemente; use opacity para aparecer o desaparecer gradualmente.
Práctica: aparición gradual de un modal
Un modal que aparece gradualmente y aumenta su escala desde un tamaño ligeramente menor. Aplique la clase .open con JavaScript; CSS se encarga de la animación.
.modal {
opacity: 0;
transform: scale(0.95);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
.modal.open {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}Rendimiento: use transform y opacity
Animar propiedades que activan el diseño (width, height, margin, top, left) es costoso: el navegador recalcula el diseño en cada fotograma. Use transform y opacity para obtener animaciones fluidas a 60fps.
Comprobación rápida
¿Qué propiedad CSS debería preferir al animar para obtener el mejor rendimiento?
Repaso: transiciones CSS
transition: property duration timing delay. Anime propiedades específicas, no 'all'. ease, ease-out, ease-in-out producen un movimiento natural. Escuche el evento transitionend para encadenar acciones. Use transform y opacity para mejorar el rendimiento. Use cambios de clase en JS para activar las transiciones.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 41
- Lecciones
- 163
Preguntas frecuentes
¿La lección «Transiciones: propiedad duración temporización» es gratis?
Sí — el texto completo de «Transiciones: propiedad duración temporización» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Transiciones: propiedad duración temporización»?
Añada transition para animar suavemente los cambios de propiedades CSS, elija duraciones adecuadas y seleccione funciones de aceleración como ease-in-out. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Transiciones: propiedad duración temporización»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Propiedades personalizadas de CSS: declarar y actualizar
- Transiciones: propiedad duración temporización
- Animaciones con @keyframes
- Respetar prefers-reduced-motion