transition property
Redactado por
Sebastian V. Fecha de publicación
21/03/2024
Tiempo de lectura
5 min
Tema
CSS Transitions
¿Qué quieres animar exactamente?
Imagina que le dices a un director de orquesta: "Toca música". Probablemente te preguntará: "¿Qué instrumentos quieres que toquen?". En CSS, transition-property es exactamente eso. Le dice al navegador cuáles propiedades específicas deben cambiar suavemente y cuáles deben cambiar de golpe.
Valores principales
Tienes tres opciones principales al definir esta propiedad:
- ✦ all (Por defecto): Le dice al navegador que cualquier propiedad que cambie de valor debe transicionarse. Es fácil, pero puede causar problemas de rendimiento si cambian muchas cosas a la vez.
- ✦ Una propiedad específica: Como
transform,opacityobackground-color. Solo esa propiedad tendrá una transición. - ✦ Múltiples propiedades: Puedes separar propiedades por comas, por ejemplo:
transform, opacity. Esta es la forma más recomendada y profesional.
¿Por qué no usar simplemente "all"?
Es muy tentador escribir transition: all 0.3s y olvidarse del asunto. El problema es que el navegador intentará interpolar propiedades que quizás no querías animar, o peor aún, propiedades que son muy costosas para el procesador (como `box-shadow` o `margin`). Especificar exactamente qué propiedades van a cambiar hace que tu código sea predecible y mucho más rápido.
Consejo profesional
Siempre que sea posible, prefiere transicionar propiedades que no alteren el flujo del documento, como transform u opacity, en lugar de width o margin para lograr un rendimiento de 60fps.
Ejemplo práctico
<div class="container">
<button class="btn all">transition: all</button>
<button class="btn specific">transition: transform</button>
</div>El primer botón transiciona 'all' (color y posición cambian suavemente). El segundo solo transiciona 'transform' (se mueve suave, pero el color cambia de golpe).
Errores comunes
Practica lo aprendido
Domina el control de qué propiedades responden a la interacción del usuario.