Генератор прокрутки CSS-анимации
Создайте нативную CSS-анимацию, управляемую прокруткой — блок @keyframes, подключённый к animation-timeline: view() или scroll() вместо фиксированной длительности — из готовых предустановок (fade in, slide in, scale up, rotate in, reveal clip-path) с настраиваемым диапазоном анимации.
Ввод
view() анимирует элемент при входе в viewport; scroll() привязывает её к прогрессу прокрутки страницы.
Именованные диапазоны (entry/cover) работают с view(); временные шкалы scroll() понимают только простые проценты.
Вывод
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-scroll-driven-animation-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"animationType": "fadeIn",
"timelineType": "view",
"animationRange": "entry 0% cover 100%"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-scroll-driven-animation-generator` tool (CSS Scroll-Driven Animation Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-scroll-driven-animation-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Генератор прокрутки CSS-анимации — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
CSS-анимация, управляемая прокруткой, привязывает прогресс анимации элемента к положению прокрутки вместо времени на часах, используя встроенное свойство CSS animation-timeline. Установите view() и элемент будет исчезать, скользить, масштабироваться, вращаться или появляться при входе в viewport; установите scroll() и анимация будет следить за прогрессом прокрутки страницы (или контейнера прокрутки) напрямую — прогресс-бар, привязанный к прокрутке, слой параллакса или эффект появления без JavaScript, полностью управляемый композитором.
Этот генератор строит обе части для вас: блок @keyframes с правильными этапами from/to для выбранной предустановки и сопровождающее правило, которое подключает его с помощью animation-timeline и animation-range вместо фиксированного animation-duration. Скопируйте оба блока в вашу таблицу стилей и замените .scroll-animate на ваш собственный селектор.
Поддержка браузерами
CSS-анимации, управляемые прокруткой, — это относительно новая функция CSS. На момент написания Chrome и Edge (115+) поддерживают animation-timeline: scroll() и view() встроенно. Firefox и Safari пока не предоставляют поддержку по умолчанию, поэтому рассматривайте это как прогрессивное улучшение: комбинируйте с блоком @supports not (animation-timeline: view()), который устанавливает финальное состояние (to) элемента напрямую, чтобы неподдерживающие браузеры всё ещё показывали разумный статический результат вместо элемента, застрявшего невидимым или за пределами экрана. Всегда проверяйте caniuse.com/css-scroll-timeline для текущего состояния перед использованием этого в продакшене.
Как использовать
- Выберите предустановку — Fade In, Slide In (слева/справа/снизу), Scale Up, Rotate In или Reveal Clip Path. Каждая — это готовая к использованию пара
from/toшаговopacity/transform/clip-path. - Выберите временную шкалу —
view()анимирует элемент при его скольжении в viewport и через него (лучше всего для эффектов "появления при прокрутке");scroll()привязывает анимацию к общему прогрессу прокрутки ближайшего контейнера прокрутки (лучше всего для прогресс-баров и эффектов в стиле параллакса). - Выберите диапазон анимации — контролирует какую часть временной шкалы воспроизводит анимация. Именованные диапазоны, такие как
entryиcover, описывают фазы пересечения элементом viewport и предназначены дляview(); простые проценты, такие как0% 100%, работают с любым типом временной шкалы. - Скопируйте созданный CSS и вставьте его в вашу таблицу стилей или загрузите как файл
.css.
FAQ
Почему селектор .scroll-animate?
Это заполнитель, чтобы CSS был готов к вставке — переименуйте его в соответствии с элементом, который вы хотите анимировать.
Что на самом деле контролирует animation-range?
Он отображает часть временной шкалы прокрутки на прогресс анимации 0%–100%. Например, entry 0% cover 100% запускает анимацию в момент начала входа элемента в viewport и завершается после полного покрытия (прокрутки) этой фазы входа.
Почему нет animation-duration?
CSS-анимации, управляемые прокруткой, не работают по часам — их "длительность" — это сколько диапазона прокрутки вы назначите им через animation-range. Установка явной длительности не требуется (и игнорируется механизмом временной шкалы).
Что происходит в браузерах, которые пока это не поддерживают?
Без поддержки animation-timeline просто игнорируется, поэтому элемент остаётся в состоянии по умолчанию (from) — обычно невидимым или смещённым. Добавьте блок @supports not (animation-timeline: view()) с финальными стилями элемента как статический fallback.
Могу ли я анимировать больше, чем opacity и transform?
Да — любое анимируемое CSS-свойство работает внутри @keyframes, включая clip-path, используемый предустановкой Reveal здесь. Transform и opacity предпочтительны, потому что они дружественны композитору и остаются гладкими при прокрутке.
Конфиденциальность
Всё работает локально в вашем браузере — ваши настройки никогда не покидают ваше устройство и никакой CSS не отправляется на сервер для создания.