Transiciones y animaciones

⏱ 40 minutos
📶 Nivel: principiante
🧩 Incluye ejercicio

💡 🎯 Al terminar esta lección podrás…

Suavizar cambios de estado con transition.
Mover, girar y escalar con transform sin afectar al layout.
Crear animaciones con @keyframes.
Aplicar buenas prácticas de rendimiento y accesibilidad.

1.Para qué sirve el movimiento

Una animación bien hecha comunica: confirma que algo se pulsó, guía la mirada, muestra de dónde viene un elemento o indica que algo está cargando. Una animación mal hecha molesta: distrae, marea y ralentiza.

CSS tiene dos herramientas:

Aspecto	Transiciones	Animaciones
Qué hacen	Pasan de un estado a otro de forma suave	Siguen una secuencia de pasos que tú defines
Se disparan	Con un cambio (hover, foco, clase…)	Solas, al cargar o al añadir la clase
Se escriben con	`transition`	`@keyframes` + `animation`
Ejemplo	Un botón que cambia de color al pasar el cursor	Un indicador de carga que gira sin parar

2.Transiciones

Una transición completa

.boton {
  background: #4f46e5;
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.boton:hover {
  background: #3730a3;
  transform: translateY(-3px);
}

Propiedad	Qué define	Ejemplos
`transition-property`	Qué propiedad se anima	`transform`, `background-color`, `all`
`transition-duration`	Cuánto dura	`200ms`, `0.3s`
`transition-timing-function`	El ritmo	`ease`, `linear`, `ease-in-out`, `cubic-bezier(…)`
`transition-delay`	Espera antes de empezar	`100ms`
`transition`	Atajo	`transform .25s ease .1s`

Escribe la transición en el estado base, no en el :hover: así también funciona al volver.
Dura entre 150 y 300 ms para interacciones; más largo se siente lento.
Evita transition: all: anima propiedades que no esperabas y es menos eficiente. Nombra las que quieres.

✏️ Tarjeta que se levanta

Código (edítalo)

<style>
  .tarjeta { width: 220px; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid #dde2ef;
             box-shadow: 0 1px 2px rgb(0 0 0 / .08);
             transition: transform .25s ease, box-shadow .25s ease; }
  .tarjeta:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgb(0 0 0 / .18); }
  .boton { margin-top: 14px; padding: 10px 18px; border: 0; border-radius: 10px; background: #4f46e5; color: #fff; cursor: pointer;
           transition: background-color .2s, transform .1s; }
  .boton:hover { background: #3730a3; } .boton:active { transform: scale(.96); }
</style>
<div class="tarjeta"><strong>Pasa el cursor</strong><p>Prueba a cambiar la duración o a quitar la transición.</p></div>
<button class="boton">Púlsame</button>

Resultado

💡 Consejo · Mismas curvas, mismo carácter

ease-out (empieza rápido y frena) es ideal para cosas que aparecen; ease-in (empieza lento y acelera) para cosas que se van. Mantén las mismas curvas y duraciones en todo el sitio: da coherencia.

3.transform: mover, girar y escalar

Función	Efecto	Ejemplo
`translate(x, y)`	Mueve (sin afectar al layout)	`translate(10px, -4px)`, `translateY(-50%)`
`rotate(ángulo)`	Gira	`rotate(45deg)`
`scale(n)`	Cambia el tamaño	`scale(1.1)`, `scale(.9)`
`skew(ángulo)`	Inclina	`skewX(-10deg)`
`transform-origin`	El punto alrededor del que se transforma	`top left`, `50% 100%`

Se pueden combinar separándolas con espacios: transform: translateY(-4px) rotate(3deg) scale(1.05). El orden importa: se aplican de derecha a izquierda.

✏️ Transformaciones

Código (edítalo)

<style>
  .fila { display: flex; gap: 28px; padding: 24px 12px; flex-wrap: wrap; }
  .c { width: 70px; height: 70px; background: #4f46e5; border-radius: 12px; color: #fff; display: grid; place-items: center; font-size: .8rem; transition: transform .4s; }
  .t:hover { transform: translateY(-14px); } .r:hover { transform: rotate(45deg); } .s:hover { transform: scale(1.3); }
  .k:hover { transform: skewX(-15deg); } .o { transform-origin: top left; } .o:hover { transform: rotate(25deg); }
</style>
<div class="fila"><div class="c t">mover</div><div class="c r">girar</div><div class="c s">escalar</div><div class="c k">inclinar</div><div class="c o">origen</div></div>

Resultado

📌 Nota · Por qué transform y no top/left

transform y opacity se animan en la tarjeta gráfica, sin recalcular el layout: son fluidos incluso en celulares. Animar top, left, width o margin obliga al navegador a recolocar la página en cada fotograma. Prefiere siempre transform y opacity.

4.Animaciones con @keyframes

Una animación tiene dos partes: defines los pasos con @keyframes y la aplicas con animation.

Un fundido con deslizamiento

@keyframes aparecer {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.aviso {
  animation: aparecer 0.5s ease-out both;
}

Pasos intermedios con porcentajes

@keyframes latido {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}
.latido { animation: latido 1.2s ease-in-out infinite; }

Propiedad	Qué define	Valores
`animation-name`	Qué `@keyframes` usar	`aparecer`
`animation-duration`	Duración de un ciclo	`1s`
`animation-timing-function`	El ritmo	`ease`, `linear`, `steps(4)`
`animation-delay`	Espera inicial	`.2s`
`animation-iteration-count`	Cuántas veces	`1`, `3`, `infinite`
`animation-direction`	Sentido	`normal`, `reverse`, `alternate`
`animation-fill-mode`	Qué pasa antes y después	`forwards`, `backwards`, `both`
`animation-play-state`	Pausar o reanudar	`paused`, `running`
`animation`	Atajo	`latido 1.2s ease-in-out infinite`

⚠️ Importante · animation-fill-mode

Sin both (o backwards), un elemento con animation-delay se ve ya en su estado final antes de empezar y luego «salta» al inicio. Con forwards (o both) conserva el estado final al terminar en vez de volver al principio.

✏️ Tres animaciones

Código (edítalo)

<style>
  @keyframes aparecer { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
  @keyframes girar { to { transform: rotate(360deg); } }
  .fila { display: flex; gap: 30px; align-items: center; padding: 16px; }
  .aviso { background: #eef2ff; padding: 10px 14px; border-radius: 10px; animation: aparecer .6s ease-out both; }
  .corazon { font-size: 2rem; color: #e11d48; animation: latido 1.2s ease-in-out infinite; }
  .spinner { width: 36px; height: 36px; border: 4px solid #c7d2fe; border-top-color: #4f46e5; border-radius: 50%; animation: girar .8s linear infinite; }
</style>
<div class="fila"><div class="aviso">Aparezco</div><div class="corazon">♥</div><div class="spinner" role="status" aria-label="Cargando"></div></div>
<p>Recarga el resultado con «Restablecer» para ver otra vez la entrada.</p>

Resultado

5.Patrones de animación frecuentes

Entrada escalonada

Cada elemento aparece un poco después

.lista li {
  animation: aparecer .5s ease-out both;
  animation-delay: calc(var(--i) * 80ms);      /* --i: 0, 1, 2… desde el HTML o JS */
}

Subrayado que crece

Un enlace con detalle

.enlace { position: relative; text-decoration: none; }
.enlace::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.enlace:hover::after { transform: scaleX(1); }

Desplazamiento suave

Navegación interna fluida

html { scroll-behavior: smooth; }

✏️ Subrayado que crece

Código (edítalo)

<style>
  .enlace { position: relative; text-decoration: none; color: #4f46e5; font-weight: 700; font-size: 1.2rem; }
  .enlace::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 3px; width: 100%; background: currentColor;
                   transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
  .enlace:hover::after, .enlace:focus-visible::after { transform: scaleX(1); }
</style>
<p><a class="enlace" href="#">Pasa el cursor o usa Tab</a></p>

Resultado

6.Accesibilidad: respeta a quien no quiere movimiento

Para algunas personas (con trastornos vestibulares, migrañas o epilepsia) el movimiento causa mareo o malestar. Los sistemas operativos tienen un ajuste «reducir movimiento» y CSS puede leerlo:

Apagar las animaciones cuando se pide

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Nada de parpadeos rápidos (más de 3 por segundo).
Las animaciones que se repiten sin fin deben poder pausarse.
No uses el movimiento como única forma de comunicar algo.
Una animación no debe retrasar una acción que la persona quiere hacer.

📌 Nota · Este mismo sitio lo hace

Todas las animaciones de este curso se desactivan si tu sistema pide reducir movimiento. Pruébalo activando esa opción en la configuración de tu sistema.

7.Errores frecuentes

Animar width, height, top o left: provoca tirones. Usa transform.
Escribir la transición solo en :hover: la ida es suave pero la vuelta, brusca.
transition: all en todo: efectos inesperados y gasto de rendimiento.
Duraciones demasiado largas (1s para un botón).
Olvidar animation-fill-mode y ver saltos.
display: none ↔ display: block: no se puede animar; usa opacity + visibility, o @starting-style en navegadores modernos.
Ignorar prefers-reduced-motion.

📒 Apuntes para llevar

Las transiciones suavizan un cambio de estado; las animaciones siguen una secuencia con @keyframes.
Escribe transition en el estado base, nombra las propiedades y usa 150–300 ms.
transform (translate, rotate, scale, skew) y opacity son las propiedades fluidas: evita animar top, left o width.
@keyframes define pasos (from/to o porcentajes); animation los aplica.
infinite, alternate y animation-fill-mode: both controlan repetición, sentido y estado final/inicial.
Con calc(var(--i) * 80ms) se logra una entrada escalonada.
Respeta @media (prefers-reduced-motion: reduce) y evita parpadeos.
scroll-behavior: smooth suaviza el desplazamiento interno.

8.Glosario

Término	Significado
Transición	Cambio gradual entre dos estados de una propiedad.
`@keyframes`	Regla que define los pasos de una animación.
`transform`	Mueve, gira, escala o inclina un elemento sin alterar el layout.
Función de ritmo (timing)	Curva de aceleración: `ease`, `linear`, `cubic-bezier()`.
`animation-fill-mode`	Qué estilos se aplican antes y después de la animación.
`prefers-reduced-motion`	Preferencia del sistema para reducir el movimiento.
Fotograma (frame)	Cada imagen que se pinta; lo ideal son 60 por segundo.
Aceleración por hardware	Procesado en la GPU, típico de `transform` y `opacity`.

🧠 Comprueba lo aprendido

Elige una respuesta en cada pregunta. Verás al instante si acertaste y por qué.

¿Dónde conviene escribir transition para que funcione también al volver?

¿Cuáles son las propiedades más fluidas para animar?

¿Qué hace animation-iteration-count: infinite?

¿Para qué sirve @media (prefers-reduced-motion: reduce)?

Un elemento con animation-delay se ve en su estado final antes de empezar y luego salta. ¿Qué falta?

backwards aplica el primer fotograma durante el retraso; both además conserva el último al final.

Tu progreso se guarda en este navegador y se refleja en el índice del curso.

💡 🚀 ¡Ahora te toca!

La práctica fija lo aprendido. Pasa al ejercicio de esta lección.

Ir al ejercicio