CSS
Crea cambios de estado suaves con transition-property, duration, timing-function y delay, evitando animar propiedades costosas o ambiguas.
Una transition interpola el valor anterior y el nuevo cuando una propiedad cambia.
.button {
background-color: var(--button-bg);
transition: background-color 180ms ease;
}
.button:hover {
--button-bg: var(--brand-dark);
}transition-property: opacity, transform;
transition-duration: 180ms;
transition-timing-function: ease;
transition-delay: 0ms;Shorthand:
transition:
opacity 180ms ease,
transform 220ms cubic-bezier(.2, .8, .2, 1);Algunas propiedades interpolan numéricamente, otras de forma discreta y otras no producen una transición útil.
opacity: 0 → 1
color: red → blue
width: 10rem → 20remdisplay fue históricamente discreta; las capacidades modernas permiten coordinar ciertas transiciones discretas mediante transition-behavior y @starting-style, pero requieren entender el estado de entrada/salida y soporte objetivo.
linear
ease
ease-in
ease-out
ease-in-out
cubic-bezier(...)
steps(...)La curva debe reflejar la interacción:
transition: all 200ms ease;Es cómodo, pero anima propiedades inesperadas, dificulta debugging y puede introducir costo. Lista solo las propiedades intencionales.
Animar width, height, margin o top puede provocar layout en cada frame. Transform y opacity suelen ser mejores para movimiento visual, pero no son automáticamente gratuitas.
height: 0 → autoNo siempre interpola como una longitud ordinaria. Estrategias:
interpolate-size y calc-size() cuando el soporte objetivo lo permite.@starting-style {
dialog[open] {
opacity: 0;
scale: 0.96;
}
}Permite definir el estilo previo de un elemento que aparece sin haber tenido un estado renderizado anterior.
transition-behavior: allow-discrete;Permite incluir propiedades discretas compatibles en una transición. No convierte cualquier propiedad en interpolable.
JavaScript puede escuchar transitionend, pero el evento puede no dispararse si la transición se cancela, la property cambia o el elemento desaparece. No bases lógica crítica únicamente en él.
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition-duration: 0.01ms;
}
}Un reset global puede romper componentes o events. Prefiere reducir o eliminar movimiento en reglas específicas manteniendo feedback inmediato.
¿Por qué transition: all puede animar un cambio que no esperabas?
Porque incluye toda propiedad animable cuyo valor cambie, incluso si otra regla o media query la modifica accidentalmente.
Animations y keyframes controla secuencias independientes de un único cambio de estado.