Как сделать CSS-анимацию адаптивной?

Ключевая идея

Анимация должна уважать viewport, motion-preferения и производительность, а не только «красиво на 1440px».

Приёмы

@keyframes slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.banner {
  animation: slide 500ms ease both;
}

@media (max-width: 600px) {
  .banner { animation-duration: 350ms; }
}

@media (prefers-reduced-motion: reduce) {
  .banner { animation: none; }
}

Анимируйте transform/opacity. Дистанции лучше в %/svh, не в жёстких px. На слабых устройствах упрощайте (меньше blur/shadow).

Итог

Media queries + prefers-reduced-motion + относительные величины + композитные свойства. Адаптив — не только ширина колонок.