Генератор CSS-анимаций Keyframe
Создавайте CSS-анимации @keyframes из готовых предустановок (подпрыгивание, встряхивание, пульсация, плавное появление, скольжение, вращение, качание, резинка, вспышка, колебание) с длительностью, плавностью, задержкой, количеством итераций и направлением — скопируйте keyframes и shorthand анимации для применения.
Ввод
Длительность одного полного цикла анимации в секундах.
Время ожидания перед началом анимации.
A positive whole number, or "infinite" to loop forever.
Вывод
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-keyframe-animation-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"animationType": "fadeIn",
"duration": "1",
"timingFunction": "ease-in-out",
"delay": "0",
"iterationCount": "1",
"direction": "normal"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-keyframe-animation-generator` tool (CSS Keyframe Animation Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-keyframe-animation-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Генератор CSS-анимаций Keyframe — 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-анимация keyframe определяет, как стиль элемента меняется в течение цикла анимации, используя at-правило @keyframes для описания серии шагов (от 0% до 100%) и свойство shorthand animation для применения этих шагов к элементу с длительностью, плавностью, задержкой, количеством повторений и направлением. Keyframe-анимации позволяют кнопке пульсировать, карточке появляться плавно или значку уведомления дрожать — все это без JavaScript и работает на compositor-потоке браузера для плавного и эффективного движения.
Этот генератор создает обе части для вас: блок @keyframes с правильными процентными остановками и свойствами для выбранной предустановки, и соответствующее правило .animated-element { animation: ...; }, которое его применяет. Скопируйте оба правила в вашу таблицу стилей и замените .animated-element на ваш собственный селектор.
Как использовать
- Выберите предустановку — Подпрыгивание, Встряхивание, Пульсация, Плавное появление, Скольжение слева, Вращение, Качание, Резинка, Вспышка или Колебание. Каждая предустановка — это готовая последовательность шагов
transform/opacity, смоделированная на основе популярных эффектов из библиотек анимаций, таких как Animate.css. - Установите длительность в секундах — как долго будет длиться один полный цикл.
- Выберите функцию времени —
ease,ease-in,ease-out,ease-in-outилиlinear— для управления кривой ускорения. - Установите задержку в секундах, если вы хотите, чтобы анимация ждала перед началом.
- Установите количество итераций — целое число, например
1или3, илиinfiniteдля бесконечного повтора. - Выберите направление —
normalвоспроизводит вперед каждый цикл,reverseвоспроизводит назад,alternateменяет направление через цикл, аalternate-reverseначинается в обратном направлении и меняется. - Скопируйте созданный CSS и вставьте его в вашу таблицу стилей или загрузите как файл
.css.
Часто задаваемые вопросы
Почему селектор .animated-element?
Это placeholder, чтобы CSS был готов к вставке — переименуйте его, чтобы соответствовать элементу, который вы хотите анимировать (класс, ID или любой селектор).
Могу ли я использовать эти предустановки с любым элементом HTML?
Да. Анимации @keyframes применяются к любому элементу через свойство animation; некоторые предустановки (такие как Скольжение слева) выглядят лучше всего на блочных элементах с определенными размерами.
В чем разница между iteration-count: infinite и числом?
Число воспроизводит анимацию столько раз и затем останавливается на последнем кадре (если только animation-fill-mode не говорит иное). infinite повторяется бесконечно — полезно для загрузчиков и спиннеров, таких как предустановка Вращение.
Влияют ли эти анимации на производительность страницы?
Анимация transform и opacity (что использует каждая предустановка здесь) ускоряется GPU в современных браузерах и является рекомендуемым подходом для плавной CSS-анимации — дешевле, чем анимация свойств макета, таких как width, top или margin.
Могу ли я комбинировать несколько предустановок на одном элементе?
Не напрямую в этом инструменте, но вы можете вручную указать несколько разделенных запятой значений shorthand animation после получения двух созданных блоков, если их имена @keyframes не конфликтуют.
Конфиденциальность
Все работает локально в вашем браузере — ваши настройки никогда не покидают ваше устройство, и никакой CSS не отправляется на сервер для создания.