CSS Transiciones & Animaciones

transition, @keyframes, animation y transform.

transition Transición

Anima el cambio de una propiedad. Shorthand: propiedad duración easing retardo. Pasa el cursor sobre los bloques.

ease .3s
linear .5s
bounce
multi
transform Transform

Traslada, rota, escala, inclina o aplica matrices 2D/3D sin afectar el layout.

translateX
rotate 15°
scale 1.2
skewX
3D rotateY
múltiple
@keyframes · animation Animación

Transiciones entre múltiples estados. Propiedades: name duration timing-function delay iteration-count direction fill-mode play-state.

pulse
bounce
spin
shake
float
flip
@keyframes pulse {
  0%, 100% { transform: scale(1);    }
  50%       { transform: scale(1.15); }
}
.el { animation: pulse 1.5s ease-in-out infinite; }
transition-timing-function — Playground Easing

La función de temporización define la curva de aceleración de la transición. Pasa el cursor sobre cada bloque.

linear
ease
ease-in
ease-out
ease-in-out
bounce
steps(5)
animation-delay · staggering Temporal

animation-delay retrasa el inicio de la animación. Usando valores progresivos (staggering) se crean efectos en cascada.

.item:nth-child(1) { animation-delay: 0s;   }
.item:nth-child(2) { animation-delay: 0.1s; }
.item:nth-child(3) { animation-delay: 0.2s; }
animation-fill-mode Estado

Define si el elemento retiene los estilos del primer o último keyframe cuando la animación no está activa.

none
forwards
animation-fill-mode: none     /* vuelve al inicio */
animation-fill-mode: forwards  /* se queda al final */
animation-fill-mode: backwards /* empieza desde @0% */
animation-fill-mode: both      /* forwards + backwards */
will-change Performance

Informa al navegador que una propiedad va a cambiar, permitiéndole optimizar con anticipación. Usar con moderación.

/* Bueno: animaciones frecuentes */
.modal-animated {
  will-change: transform, opacity;
}

/* Evitar: aplicar a todo */
* { will-change: transform; } /* ❌ consume VRAM */

/* Limpiar tras la animación */
el.addEventListener('transitionend', () => {
  el.style.willChange = 'auto';
});

Propiedades recomendadas: transform, opacity. Crea un nuevo compositing layer en la GPU.

animation-timeline Moderno

Vincula una animación al progreso del scroll (CSS 2023+). Sin JavaScript. El elemento se anima según cuánto has scrollado.

↕ Scrollea aquí dentro
@keyframes reveal {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}
.progress-bar {
  animation: reveal linear;
  animation-timeline: scroll(root);
  animation-range: 0% 100%;
}