Animaciones sin JS: CSS ya lo sabe todo

Hasta hace poco, «aparecer al desplazarse» o «cambiar entre pantallas» significaba manejadores de eventos y un montón de código JS. Hoy en día, los motores de los navegadores se encargan del renderizado y nosotros describimos la intención en CSS. Ventajas: menos dependencias, fluidez a nivel de compositor, limitaciones de rendimiento más claras.

🚀 Scroll-linked animations: @scroll-timeline

Vinculamos el progreso de la animación con el desplazamiento. El propio navegador da la «línea de tiempo», solo queda adjuntar fotogramas clave a ella.

@scroll-timeline fade-tl {
  source: auto;               /* ближайший скроллируемый контейнер */
  orientation: block;         /* по оси прокрутки */
  scroll-offsets: 0%, 100%;   /* начало/конец */
}

.section__item{
  animation: fade-in 1s both linear;
  animation-timeline: fade-tl;        /* ← магия */
  animation-range: entry 0% cover 60%;/* когда и как играться */
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

Dónde usar: apariencia de tarjetas, paralaje, barra de progreso de lectura, encabezados de sección pegajosos.

🔁 View Transitions API: «gradientes» entre estados

Transiciones nativas entre páginas/estados sin sincronización manual. JS inicia la transacción, CSS la ejecuta.

/* CSS */
::view-transition-old(root),
::view-transition-new(root){
  animation: fade .35s ease;
}

@keyframes fade {
  from { opacity: .001 }
  to   { opacity: 1 }
}

/* JS (одна строка в обработчике) */
// document.startViewTransition(() => router.navigate('/about'));

Característica: puedes nombrar elementos a través de view-transition-name y hacer un «vuelo» de bloques específicos (imagen de héroe, título).

📦 Consultas de contenedores + animaciones

Los componentes responden al ancho/alto del elemento principal, no a toda la ventana gráfica. Puede "reensamblar" suavemente la tarjeta al cambiar de área.

.card{
  container-type: inline-size; /* объявили контейнер */
}

@container (min-width: 520px){
  .card__media{ inline-size: 280px }
  .card__body{ animation: grow .4s ease }
}

@keyframes grow{
  from{ transform: scale(.96) }
  to  { transform: scale(1) }
}

🧲 Selector de estado :has() sin JS

La reacción del elemento principal al estado/presencia de elementos secundarios es un desencadenante de la animación.

.accordion:has(input:checked) .accordion__panel{
  grid-template-rows: 1fr;          /* раскрываем */
  transition: grid-template-rows .3s ease;
}
.accordion:not(:has(input:checked)) .accordion__panel{
  grid-template-rows: 0fr;          /* скрываем */
}
.card:has(:hover){ transform: rotate(1.5deg) scale(1.03); transition:.25s }

🧩 Propiedades de transformación individuales y composición de animaciones

En lugar de la «gran» transformación, están disponibles las opciones independientes de traslación, escala y rotación. Y la propiedad animation-composition permite añadir efectos.

.chip{
  translate: 0 8px;        /* читаемее и безопаснее */
  rotate: 1deg;
  transition: translate .25s ease, rotate .25s ease;
}
.chip:hover{ translate: 0 0; rotate: 0deg }

.pulse{ animation: pulse 1.2s infinite ease; }
.float{ animation: float 3s infinite ease alternate; }
.pulse, .float{ animation-composition: add; } /* суммируем эффекты */

@keyframes pulse{ from{scale:1} 50%{scale:1.04} to{scale:1} }
@keyframes float{ from{translate:0 0} to{translate:0 -8px} }

📊 Antes/Después

CSS ha llegado a un nivel en el que la mayoría de las animaciones de la interfaz se crean de forma declarativa y funcionan más rápido. Utiliza @scroll-timeline, View Transitions, :has(), Container Queries y propiedades de transformación individuales, y deja JS donde se necesita lógica, no render.

📚 ¿Quieres profundizar en el tema?

En el anexo Kodik encontrarás lecciones detalladas sobre diferentes temas, ejercicios paso a paso, análisis de errores y una práctica cómoda directamente en tu teléfono o navegador.

Y si quieres estar al tanto de las noticias, nuevas características y materiales útiles, suscríbete a nuestro Canal de Telegram. Es acogedor, profesional y con amor por el código ❤️

💬 ¿Qué efectos ya has trasladado de JS a CSS y cuál ha dado más resultados?