CSS Бесплатно, без регистрации

Генератор CSS Scroll-driven Animations

Раньше для анимаций при прокрутке страницы приходилось подключать тяжёлые JS-библиотеки (GSAP, ScrollMagic). Современный CSS даёт нативные свойства animation-timeline: scroll() и view() — плавная работа 60 FPS прямо в потоке композитинга браузера.

Результат

Готовый CSS-код

/* 100% təmiz CSS ilə skroll animasiyası */
@keyframes revealCard {
  from { opacity: 0; transform: translateY(40px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.card {
  animation: revealCard linear both;
  animation-timeline: view();
  animation-range: entry 10% cover 40%;
}

Как пользоваться

Выберите режим: «Прогресс всей страницы» (scroll) или «Появление элементов в поле зрения» (view).
Прокручивайте встроенный контейнер колёсиком мыши (или нажмите кнопку авто-скролла), наблюдая за привязкой шкалы времени к прокрутке.
Переключайте тип эффекта (Fade + Сдвиг вверх, Зуммирование, Лёгкий 3D-наклон или Проявление из блюра).
Настройте фазу animation-range (entry, cover, exit) и скопируйте чистый CSS-код.

Как это работает

Что такое animation-timeline: scroll()?

Обычная анимация @keyframes привязана к физическому времени (animation-duration: 1s). Свойство animation-timeline: scroll() заменяет таймер на позицию скролла: в самом верху контейнера прогресс 0%, в самом низу — 100%. Скорость анимации точно следует за пальцем или колесом мыши пользователя.

Разница между scroll() и view()

scroll() привязан к общему прогрессу прокрутки скролл-контейнера (идеально для полосы чтения вверху статьи). view() отслеживает видимость конкретного блока внутри viewport (идеально для появления карточек при доскролле).

/* Индикатор чтения в шапке без единой строчки JS */
.progress-bar {
  transform-origin: 0 50%;
  animation: fillProgress linear;
  animation-timeline: scroll();
}

Роль свойства animation-range

animation-range задаёт точный интервал выполнения: например, entry 10% cover 40% означает, что анимация начнётся, когда карточка едва покажется на 10% снизу экрана, и завершится, когда она поднимется на 40% высоты окна.

Частые вопросы

Нужен ли JS-обработчик onscroll или IntersectionObserver?

Нет! Никакого JS не требуется. Анимация исполняется в Compositor Thread браузера и не подтормаживает даже при тяжёлых вычислениях на странице.

Как обстоят дела с поддержкой браузеров?

Chrome 115+, Edge 115+, Opera и все браузеры на базе Chromium поддерживают спецификацию нативно (более 75% пользователей). Для остальных браузеров пишется директива @supports.

Как отключить для пользователей с морской болезнью?

В медиа-запросе @media (prefers-reduced-motion: reduce) задаётся animation: none !important;.

Эта тема в курсе HTML и CSS

Другие CSS-инструменты