La Web: HTML y CSS

✨ Transiciones, transforms y animaciones

Da vida a tus interfaces: transforma elementos, anima cambios de estado con transitions y crea movimiento con @keyframes, respetando las preferencias de accesibilidad.

Qué aprenderás

Mover, escalar y rotar elementos con transform sin afectar al flujo del documento
Suavizar cambios de estado (como :hover) con transition, ajustando propiedad, duración y easing
Crear animaciones con fotogramas usando @keyframes y la propiedad animation
Respetar la accesibilidad atenuando el movimiento con prefers-reduced-motion

Lecciones

transform: mover, escalar y rotartranslate, scale y rotate sin afectar al flujo del documento. transition: animar cambios de estadoSuaviza los cambios (p. ej. al :hover): propiedad, duración y easing. @keyframes, animation y prefers-reduced-motionAnimaciones complejas con fotogramas, respetando la accesibilidad.

Practica este módulo en la app

DevPath es un curso práctico: aquí lees la teoría; en la app la pones en práctica con ejercicios que se ejecutan de verdad, sin conexión.

Empezar gratis en la app →