ИнструментАктуально

CSS Transition Generator

CSS Transition Generator: бесплатный браузерный инструмент с локальной обработкой данных, примером ввода и готовым результатом для копирования.

Рабочая область CSS Transition Generator

Введите property, duration и easing. Данные обрабатываются локально и не отправляются на сервер.

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

Материал «CSS Transition Generator» относится к области «браузерный инструмент: интерфейсное движение». Для темы «CSS Transition Generator» предметный результат подтверждается так: включите prefers-reduced-motion и проверить состояние до и после эффекта. Предметная проверка для «CSS Transition Generator»: включите prefers-reduced-motion и проверить состояние до и после эффекта.

  1. Введите property, duration и easing.
  2. Нажмите «Создать transition» и сравните результат с исходными данными.
  3. Включите prefers-reduced-motion и проверить состояние до и после эффекта применительно к теме «CSS Transition Generator».
  4. Скопируйте результат только после проверки синтаксиса в своём проекте.
Конфиденциальность и ограничения

Обработка выполняется локально. CSS Transition Generator не сохраняет введённый код и не передаёт его в аналитику. Для «CSS Transition Generator» сначала включите prefers-reduced-motion и проверить состояние до и после эффекта. После этого сравните исходное и изменённое состояние «CSS Transition Generator» на одном и том же содержимом.

Спецификации и источники

Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.