Transiciones CSS y keyframes, con 20 ejemplos para copiar
Laboratorio de transiciones CSS
Transiciones CSS y keyframes: 20 ejemplos en vivo | We.Inc
Ajusta la duración, el retardo y el easing con sliders, mira cómo se dibuja la curva cubic-bezier, compara las transiciones con @keyframes y copia 20 microinteracciones hover que respetan el movimiento reducido.
Una transición CSS anima una propiedad de forma suave cuando cambia su valor, por ejemplo al pasar el ratón: transition: transform 200ms ease-out. Necesita un estado inicial y uno final y se ejecuta una vez por cambio. Las animaciones con @keyframes definen sus propios pasos, pueden repetirse en bucle y empiezan sin ningún cambio de estado. Anima transform y opacity para obtener los resultados más fluidos.
transition, parte por parte
Parte
Ejemplo
Valor por defecto
transform, opacity
ease-out o cubic-bezier(.2,.8,.2,1)
El laboratorio anima un elemento real entre dos estados con la propiedad, la duración, el retardo y el easing que elijas, y dibuja el easing como una curva para que veas por qué ease-out se siente ágil y ease-in se siente lento. Más abajo hay veinte efectos de hover y focus que puedes editar en vivo y pegar en cualquier sitio.
Elige qué propiedad animar: movimiento, escala, rotación, color u opacidad.
Define la duración y el retardo con los sliders, y elige un easing predefinido o arrastra los cuatro números del bezier.
Pulsa Reproducir para alternar entre los dos estados y mira el resultado junto a su curva.
Copia la línea transition y luego llévate cualquiera de las veinte microinteracciones de abajo.
La respuesta de una interfaz se siente instantánea entre unos 100 y 300 milisegundos. Más de medio segundo empieza a sentirse lento para un hover.
Usa ease-out para lo que entra o reacciona al puntero, ease-in para lo que sale y ease-in-out para lo que se desplaza de un sitio a otro.
Enumera las propiedades que animas en lugar de escribir transition: all, para que ningún cambio ajeno se anime por sorpresa.
Envuelve el movimiento en una comprobación de prefers-reduced-motion y ofrece un fundido más suave o ninguna animación a quien pide menos movimiento.
Preguntas frecuentes
¿Qué diferencia hay entre una transición y una animación?
Una transición reacciona a un cambio de valor, como que se añada una clase o empiece un hover, y solo va del valor antiguo al nuevo. Una animación usa @keyframes, puede tener muchos pasos, repetirse o alternar, y se ejecuta en cuanto se aplica. Usa transiciones para cambios de estado y keyframes para indicadores de carga y llamadas de atención.
¿Por qué no se ejecuta mi transición?
Causas habituales: la propiedad no es animable (display no lo era hasta allow-discrete), el valor inicial es auto (height: auto no se puede interpolar sin funciones más recientes), el elemento se acaba de insertar y no hay estilo previo, o la transición solo está declarada en el estado hover y por eso vuelve de golpe al quitar el ratón.
¿Qué propiedades son baratas de animar?
transform y opacity suelen poder gestionarse en el compositor sin recalcular el layout ni repintar, así que se mantienen fluidas. Animar width, height, top, left o margin fuerza el layout en cada fotograma, y box-shadow o filter provocan repintados, lo que puede dar tirones en móviles más lentos.
¿Qué significa cubic-bezier?
Describe la curva de easing con dos puntos de control, cubic-bezier(x1, y1, x2, y2). Los valores x son el tiempo y deben quedarse entre 0 y 1; los valores y son el progreso y pueden salirse de ese rango, lo que crea un sobrepaso o un pequeño rebote.
¿Cómo respeto el movimiento reducido?
Usa la media query @media (prefers-reduced-motion: reduce) para acortar o quitar el movimiento. Una forma sencilla es mantener los cambios de color y opacidad pero quitar los transforms, o poner transition-duration y animation-duration a un valor mínimo dentro de esa query.
Cómo leer una curva de easing
El eje horizontal de una curva de easing es el tiempo y el vertical es el progreso. Un inicio empinado significa que la mayor parte del movimiento ocurre al principio, y así es como ease-out da esa sensación de respuesta. Un inicio plano significa que el elemento duda primero, por eso ease-in en un hover se siente con retraso.
linear es una diagonal recta y resulta mecánica para el movimiento, aunque va bien para spinners y ciclos de color. steps(4) avanza en cuatro saltos iguales en vez de deslizarse, práctico para sprite sheets o un efecto de escritura.
¿Transición o @keyframes?
Elige una transición cuando haya dos estados y el cambio lo provoque el usuario: hover, focus, abierto, seleccionado. El navegador calcula los fotogramas intermedios e incluso se invierte con suavidad si el estado vuelve atrás a mitad de camino.
Elige @keyframes cuando el movimiento tenga más de dos pasos, deba repetirse en bucle o tenga que reproducirse solo al cargar la página. animation-fill-mode: both mantiene aplicado el primer fotograma durante cualquier retardo y el último cuando termina, lo que evita un parpadeo.
Animar desde y hacia display: none
Los navegadores más recientes permiten que display y overlay participen en las transiciones si añades transition-behavior: allow-discrete, y @starting-style da a un elemento un estilo desde el que animarse en su primer render. Juntos permiten fundidos de entrada y salida en popovers y diálogos sin script.
El soporte llegó a lo largo de 2023 y 2024 y es desigual en versiones antiguas, así que trátalo como una mejora: sin soporte, el elemento simplemente aparece y desaparece al instante.
Transición frente a @keyframes de un vistazo
Cuándo usar cada una
Animación con @keyframes
Empieza cuando
Cambia el valor de una propiedad
Se aplica la animación
Pasos
Solo inicio y fin
Tantos como escribas
Repetición
No
animation-iteration-count, incluido infinite
Se invierte con suavidad a mitad de camino
Sí
Solo con trabajo extra
Ideal para
Estados hover, focus, abierto y seleccionado
Indicadores de carga, llamadas de atención, efectos de entrada
Lo que cuesta animar cada propiedad
Trabajo de renderizado por fotograma (regla general, varía según el navegador)
Propiedad
Layout
Pintado
Solo composición
transform, opacity
No
No
Normalmente
color, background-color
No
Sí
No
box-shadow, filter
No
Sí
No
width, height, padding, margin
Sí
Sí
No
top, left (posicionado)
Sí
Sí
No
Una red de seguridad para el movimiento reducido
Mantiene los cambios de estado pero quita el desplazamiento. Ponlo cerca del final de la hoja de estilos.
Fundido de entrada y salida de un popover con @starting-style
Una mejora para los navegadores que admiten allow-discrete y @starting-style. Los demás lo muestran y ocultan al instante.
20 microinteracciones para copiar
Pasa el ratón o pon el foco en cada resultado para verlo en acción. Cada fragmento termina con una regla de movimiento reducido.
Tarjeta que se eleva
Sube una tarjeta y hace más profunda su sombra.
Botón que crece
Un pequeño escalado en hover y un efecto de pulsado al hacer clic.
Subrayado que se desliza
La línea crece desde la izquierda usando el tamaño del fondo.
Relleno de color
Los colores de fondo y de texto se intercambian a la vez.
Empujón de la flecha
El icono se mueve mientras la etiqueta se queda quieta.
Icono que gira
Un signo más se convierte en una cruz.
Fundido del anillo de foco
El desplazamiento del contorno se anima para quien usa el teclado.
Zoom de imagen dentro del marco
La imagen se escala pero el marco la recorta.
Pie de foto que aparece
El pie de foto sube desde el borde inferior.
Brillo suave
Aparece con un fundido una sombra de color.
Inclinación sutil
Unos pocos grados de rotación hacen que una pegatina parezca suelta.
Borde que se dibuja
El color del borde pasa de gris al azul de la marca.
Atenuar los demás
Al pasar el ratón por un elemento, sus hermanos se atenúan.
Barrido de brillo
Una franja de luz cruza el elemento en hover.
Interruptor deslizante
Una casilla con estilo de interruptor y un botón que se desliza.
Chevron de acordeón
El marcador gira cuando se abre un elemento details.
Punto que late (keyframes)
Un punto de estado en bucle hecho con @keyframes.
Spinner (keyframes)
El timing linear mantiene la rotación uniforme.
Aparecer subiendo al cargar (keyframes)
fill-mode both lo mantiene oculto durante el retardo.
Sacudida de error (keyframes)
Una breve sacudida horizontal que aquí se reproduce una vez en hover.
Curva de easing cubic-bezier({values})
Laboratorio de transiciones
Reproducir hacia delante
Reproducir hacia atrás
Tu dispositivo pide movimiento reducido, así que la vista previa salta en lugar de moverse.