Una transición suaviza el paso de un estado a otro (al pasar el ratón, al cambiar una clase); una animación sigue los pasos de un @keyframes.
transition: Abreviada.
animation: Abreviada.
Una transición suaviza el paso de un estado a otro (al pasar el ratón, al cambiar una clase); una animación sigue los pasos de un @keyframes. Respeta a quien pide menos movimiento: @media (prefers-reduced-motion: reduce).
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. Abreviada: qué propiedad cambia suavemente, en cuánto tiempo, con qué curva y con qué retraso.
Valores: background-color 0.3s ease, all 200ms, transform .2s, opacity .2s
Qué propiedades se animan al cambiar.
Valores: all, opacity, transform, opacity, none
Cuánto dura la transición.
Valores: 0.3s, 200ms
La curva de velocidad: cómo acelera y frena (también vale para animaciones).
Valores: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(…), steps(4)
Cuánto espera antes de empezar.
Valores: 0s, 150ms
Con allow-discrete, permite transiciones en propiedades que cambian de golpe, como display (para que algo aparezca o desaparezca con un fundido).
Valores: normal, allow-discrete
Esencial. Abreviada: el nombre del @keyframes, la duración, la curva, el retraso, las repeticiones, la dirección…
Valores: latido 1s ease-in-out infinite alternate
El nombre del @keyframes que se reproduce.
Valores: aparecer, none
Cuánto dura una vuelta de la animación.
Valores: 1s, 400ms
Cuánto espera antes de empezar. Con retrasos distintos se escalonan varias animaciones.
Valores: 0s, 0.2s, -1s (empieza ya avanzada)
La curva de velocidad de la animación (como en las transiciones). Se puede cambiar en cada fotograma clave.
Valores: ease, linear, ease-in-out, steps(6), cubic-bezier(…)
Cuántas veces se repite.
Valores: 1, 3, infinite
Si cada vuelta va hacia delante, hacia atrás o alternando.
Valores: normal, reverse, alternate, alternate-reverse
Qué estilos se quedan antes de empezar y al terminar. Con forwards, el elemento se queda como en el último fotograma.
Valores: none, forwards, backwards, both
Pausa o reanuda la animación.
Valores: running, paused
Une la animación al desplazamiento en lugar de al tiempo: avanza al hacer scroll (scroll()) o cuando el elemento entra en pantalla (view()). Así en 2026, aún no funciona en todos los navegadores.
Valores: auto, scroll(), view()
Da nombre a un elemento para que el navegador anime su cambio entre dos estados o dos páginas (View Transitions). Se usa con document.startViewTransition() o, entre páginas, con @view-transition { navigation: auto; }.
Valores: none, foto-principal
Una transición suaviza el paso de un estado a otro (al pasar el ratón, al cambiar una clase); una animación sigue los pasos de un @keyframes.
Código del tema: .boton { transition: background-color 0.3s ease, color 0.3s
Una transición suaviza el paso de un estado a otro (al pasar el ratón, al cambiar una clase); una animación sigue los pasos de un @keyframes. Respeta a quien pide menos movimiento: @media (prefers-reduced-motion: reduce).
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. Abreviada: qué propiedad cambia suavemente, en cuánto tiempo, con qué curva y con qué retraso.
Valores: background-color 0.3s ease, all 200ms, transform .2s, opacity .2s
Qué propiedades se animan al cambiar.
Valores: all, opacity, transform, opacity, none
Cuánto dura la transición.
Valores: 0.3s, 200ms
La curva de velocidad: cómo acelera y frena (también vale para animaciones).
Valores: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(…), steps(4)
Cuánto espera antes de empezar.
Valores: 0s, 150ms
Con allow-discrete, permite transiciones en propiedades que cambian de golpe, como display (para que algo aparezca o desaparezca con un fundido).
Valores: normal, allow-discrete
Esencial. Abreviada: el nombre del @keyframes, la duración, la curva, el retraso, las repeticiones, la dirección…
Valores: latido 1s ease-in-out infinite alternate
El nombre del @keyframes que se reproduce.
Valores: aparecer, none
Cuánto dura una vuelta de la animación.
Valores: 1s, 400ms
Cuánto espera antes de empezar. Con retrasos distintos se escalonan varias animaciones.
Valores: 0s, 0.2s, -1s (empieza ya avanzada)
La curva de velocidad de la animación (como en las transiciones). Se puede cambiar en cada fotograma clave.
Valores: ease, linear, ease-in-out, steps(6), cubic-bezier(…)
Cuántas veces se repite.
Valores: 1, 3, infinite
Si cada vuelta va hacia delante, hacia atrás o alternando.
Valores: normal, reverse, alternate, alternate-reverse
Qué estilos se quedan antes de empezar y al terminar. Con forwards, el elemento se queda como en el último fotograma.
Valores: none, forwards, backwards, both
Pausa o reanuda la animación.
Valores: running, paused
Une la animación al desplazamiento en lugar de al tiempo: avanza al hacer scroll (scroll()) o cuando el elemento entra en pantalla (view()). Así en 2026, aún no funciona en todos los navegadores.
Valores: auto, scroll(), view()
Da nombre a un elemento para que el navegador anime su cambio entre dos estados o dos páginas (View Transitions). Se usa con document.startViewTransition() o, entre páginas, con @view-transition { navigation: auto; }.
Valores: none, foto-principal