Генератор CSS-переходов

Создайте CSS-переход — свойство, длительность, задержку и функцию плавности — с интерактивным предпросмотром при наведении, затем скопируйте сокращённую запись, полное правило для :hover и HTML. Включает блок prefers-reduced-motion.

Ввод

Свойство перехода

Предпросмотр применяет соответствующее изменение при наведении для выбранного свойства.

Длительность (мс)

Задержка (мс)

Функция плавности

Вывод

Предпросмотр (наведите курсор на блок)

Здесь появится предпросмотр перехода.

объявление transition

CSS

HTML

Это было полезно?

Другие способы использовать этот инструмент

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-transition-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "property": "background-color",
    "duration": "300",
    "delay": "0",
    "timing": "ease",
    "baseColor": "#3b82f6",
    "hoverColor": "#8b5cf6",
    "reducedMotion": "true"
  }'

Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.

Спросите у ИИ-агента

Use the IOTools `css-transition-generator` tool (CSS Transition Generator) on this input:

YOUR_INPUT_HERE

Вставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.

Виджет для встраивания

<iframe
  src="https://iotools.cloud/embed/css-transition-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 кредитов
Нужно больше кредитов?	Посмотреть тарифы

Также доступно через

Интеграции Расширение для браузера Расширение для VS Code

Руководства

CSS-свойство transition делает изменение свойства плавным, вместо мгновенного скачка. Этот генератор позволяет выбрать, что будет анимироваться, как долго это будет длиться, когда начнётся и как будет ускоряться, а затем показывает результат на блоке, над которым можно навести курсор, чтобы подстроить эффект на глаз перед копированием CSS.

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

Выберите свойство для перехода. all анимирует все изменяющиеся свойства; указание одного свойства (например, transform или background-color) быстрее и предсказуемее.
Задайте длительность и задержку в миллисекундах. Значения 150–300 мс воспринимаются как отзывчивые для эффектов при наведении; большие значения подходят для крупных перемещений.
Выберите функцию плавности. ease-out подходит для появления элементов, ease-in — для исчезновения, linear — для плавных смен цвета и индикаторов прогресса. Выберите Свою cubic-bezier(), чтобы задать четыре контрольные точки самостоятельно, или steps() для ступенчатого эффекта.
Настройте состояние при наведении (цвета, а для transform — величину масштаба, сдвига или поворота) и наведите курсор на предпросмотр.
Скопируйте однострочное объявление transition, полное CSS-правило или HTML.

Полезно знать

Переход задаётся в состоянии покоя, поэтому он срабатывает и при наведении курсора, и при его уходе. Если нужны разные тайминги, задайте другой transition в :hover.
Анимироваться могут только свойства, для которых можно вычислить промежуточное значение: цвета, длины, opacity, трансформации, тени и фильтры. display и height: auto не анимируются.
Предпочитайте transform и opacity: браузер может анимировать их на GPU, не пересчитывая вёрстку страницы.
По умолчанию созданный CSS содержит блок prefers-reduced-motion, чтобы люди, которые просят меньше движения, не получали анимацию вовсе. Снимите флажок, если вы обрабатываете это в другом месте.
Для визуального редактора кривых попробуйте Генератор CSS Cubic Bezier.

css transitionhover effecteasingcubic-bezieranimationdurationdelaytransition-timing-functionfrontend

Нравятся инструменты? Уберите рекламу.

Один платёж навсегда убирает всю рекламу с вашего аккаунта. Без подписки, без слежки.

Убрать рекламу