Transición de varias propiedades
Aplique transiciones simultáneamente a varias propiedades CSS mediante valores separados por comas.
Transición de varias propiedades es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 3 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.
¿Por qué usar transiciones para varias propiedades?
Las interacciones reales de una interfaz suelen implicar el cambio simultáneo de varias propiedades: color de fondo, sombra y escala al pasar el cursor. CSS permite usar una función de easing y una duración independientes para cada propiedad.
Transiciones separadas por comas
Indique varias transiciones separándolas con una coma. Cada entrada se aplica a una propiedad de forma independiente:
<div class="card">Card</div>Duraciones diferentes para cada propiedad
Asigne una velocidad diferente a cada propiedad para conseguir una sensación natural y en capas:
<button class="btn">Hover-ready button</button>Funciones de easing diferentes para cada propiedad
Combine funciones de easing para que cada propiedad tenga un comportamiento adecuado:
<div class="modal">Modal content</div>Desventajas de transition: all
Usar transition: all significa que todas las propiedades que cambien tendrán los mismos tiempos. Esto puede provocar animaciones no deseadas en propiedades que deberían cambiar de forma instantánea (como display o los cambios de posición).
Transiciones interrumpibles
Las transiciones de CSS se pueden interrumpir. Si el estado hover termina a mitad de la transición, esta se invierte desde el valor animado actual, no desde el estado final. Así se producen inversiones suaves sin saltos bruscos.
Coordinar la entrada y la salida
Use duraciones diferentes para entrar y salir del estado hover sobrescribiendo las transiciones en el estado :hover:
<div class="card demo-active">Card</div>Escalonado con retraso
Añada retrasos cada vez mayores a los elementos hermanos para crear un efecto de aparición escalonada:
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>Propiedades personalizadas de CSS para el escalonado
Asigne el retraso del escalonado mediante una propiedad personalizada de CSS establecida desde JavaScript o HTML:
<div class="item">Item</div>Transición frente a animación
Use transiciones para cambios de dos estados (inactivo → hover). Use animaciones con @keyframes para secuencias de varios pasos, efectos en bucle o animaciones que se inician por sí mismas.
Optimización con will-change
Indique al navegador qué propiedades se van a animar para permitir una preoptimización. Úselo con moderación, ya que consume memoria de la GPU.
<div class="card">Card</div>Comprobación rápida
Una tarjeta tiene transition: background 150ms, transform 250ms en el estado base. Al pasar el cursor, ¿qué ocurre si el usuario lo aleja rápidamente a mitad de la animación?
Repaso
Las transiciones separadas por comas permiten que cada propiedad tenga su propia duración, función de aceleración y retraso. Evite transition: all, ya que puede animar propiedades no deseadas. Las transiciones se pueden interrumpir y se invierten suavemente desde su posición actual. Use retrasos para crear efectos escalonados.
Preguntas frecuentes
¿La lección «Transición de varias propiedades» es gratis?
Sí — el texto completo de «Transición de varias propiedades» 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 «Transición de varias propiedades»?
Aplique transiciones simultáneamente a varias propiedades CSS mediante valores separados por comas. 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 3 de 4.
¿Cuánto tiempo toma la lección «Transición de varias propiedades»?
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