Duración y temporización de las transiciones
Defina qué propiedades realizan la transición, cuánto tardan y cuándo comienzan mediante delay.
Duración y temporización de las transiciones es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 1 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 CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué es una transición de CSS?
Una transición de CSS interpola entre dos valores de una propiedad durante un periodo especificado cuando el valor cambia (por ejemplo, al pasar el cursor). No se necesita JavaScript.
transition-property
Especifica qué propiedades de CSS se deben animar. Use all para aplicar la transición a todas las propiedades que se pueden animar, o indique propiedades específicas.
<button>Save changes</button>transition-duration
Establece cuánto dura la transición. Acepta valores de tiempo en segundos (s) o milisegundos (ms).
<div class="card">Card</div>La abreviatura transition
Combina las cuatro subpropiedades de transición: property | duration | timing-function | delay.
<button class="btn">Submit</button>Varias transiciones
Indique varias transiciones separadas por comas para animar distintas propiedades de forma independiente:
<div class="card">Card</div>transition-delay
Retrasa el inicio de la transición. Resulta útil para secuenciar animaciones o permitir que una transición termine antes de que comience otra.
<nav>
<a class="nav-item" href="#">Home</a>
<a class="nav-item" href="#">About</a>
<a class="nav-item" href="#">Contact</a>
</nav>Transición en el estado base
Coloque siempre la propiedad transition en el estado base, no en el estado :hover. Esto garantiza que la transición se reproduzca tanto al entrar como al salir del estado hover.
<button class="btn demo-active">Hover me</button>¿Qué se puede animar con una transición?
La mayoría de las propiedades numéricas de CSS se pueden animar mediante transiciones: colores, dimensiones, opacidad, transformaciones, etc. Las propiedades discretas (como display) no se pueden interpolar suavemente: cambian de forma instantánea.
Advertencia sobre transition: all
Usar transition: all puede provocar animaciones inesperadas en propiedades que no pretende animar. Especifique siempre propiedades concretas en el código de producción.
Transición de colores
Las transiciones de color interpolan entre valores. Use el mismo formato de color para obtener los mejores resultados:
<button class="btn demo-active">Hover me</button>Transiciones y recálculo excesivo del diseño
Para mejorar el rendimiento, evite aplicar transiciones a propiedades que activan el diseño, como width, height, margin y padding. Estas provocan un recálculo del diseño en cada fotograma de la animación. Use transform y opacity en su lugar.
Comprobación rápida
¿Dónde se debe colocar la propiedad transition para garantizar que se reproduzca tanto al entrar como al salir del estado hover?
Resumen
Las transiciones de CSS suavizan los cambios de propiedades a lo largo del tiempo mediante transition-property, duration, timing-function y delay. Coloque las transiciones en el estado base para obtener animaciones bidireccionales. Para mejorar el rendimiento y la previsibilidad, prefiera listas de propiedades específicas en lugar de all.
Preguntas frecuentes
¿La lección «Duración y temporización de las transiciones» es gratis?
Sí — el texto completo de «Duración y temporización de las transiciones» 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 CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Duración y temporización de las transiciones»?
Defina qué propiedades realizan la transición, cuánto tardan y cuándo comienzan mediante delay. Practicas CSS 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 CSS Academy?
No se requiere experiencia previa. CSS 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 1 de 4.
¿Cuánto tiempo toma la lección «Duración y temporización de las transiciones»?
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 CSS Academy?
Sí. Cada lección de CSS 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
- Duración y temporización de las transiciones
- Funciones de easing: ease, linear y cubic-bezier
- Transición de varias propiedades
- Rendimiento: propiedades transformables frente a propiedades que provocan repintado