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
transformsin afectar al flujo del documento - Suavizar cambios de estado (como
:hover) contransition, ajustando propiedad, duración y easing - Crear animaciones con fotogramas usando
@keyframesy la propiedadanimation - 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 →