CSS Scroll-Driven Animations: майбутнє інтерактивного вебу

Scroll-driven анімації тепер можливі з чистим CSS, усуваючи потребу в JavaScript бібліотеках і покращуючи продуктивність.

Що таке Scroll-Driven Animations?

Анімації, що реагують на позицію скролу, створюючи parallax ефекти, індикатори прогресу та reveal анімації нативно в CSS.

Базовий синтаксис

@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.element {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

Реальні приклади

Індикатор прогресу

.progress-bar {
  animation: grow linear;
  animation-timeline: scroll(root);
}
@keyframes grow {
  from { scaleX: 0; }
  to { scaleX: 1; }
}

Parallax ефект

.parallax {
  animation: parallax linear;
  animation-timeline: view();
}
@keyframes parallax {
  to { transform: translateY(-50px); }
}

Підтримка браузерами

Наразі підтримується в сучасних браузерах. Використовуйте feature detection:

@supports (animation-timeline: scroll()) {
  /<em> Scroll-driven анімації </em>/
}

Створюйте плавні анімації з нашим Animation Generator!