TL
Tool Lab
💰Пожертвовать
💰Пожертвовать

CSS Animation Generator

Build CSS keyframe animations with live preview.

Box
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 1s ease 0s 1 normal both;
}

Об этом инструменте

Генератор CSS-анимаций создаёт плавные анимации с помощью настройки пресетов ключевых кадров, тайминга, длительности, задержки и итераций. Живой предпросмотр показывает анимацию в действии.

CSS-анимации с transform и opacity эффективны, так как компонуются на GPU и не вызывают пересчёт макета или перерисовку.

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

  1. Выберите тип анимации из выпадающего списка.
  2. Задайте длительность (например, 0.5s, 2s).
  3. Выберите функцию синхронизации для управления плавностью.
  4. Опционально задайте задержку перед началом анимации.
  5. Задайте количество итераций (число или infinite).
  6. Нажмите Повторить для просмотра, затем Копировать для экспорта CSS.

Случаи использования

Frontend-разработчики используют анимации fade и slide для улучшения воспринимаемой производительности. UI-дизайнеры прототипируют микровзаимодействия, такие как пульсация кнопок.

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

  • Что означает fill-mode: both? — Анимация применяет начальные стили перед запуском и сохраняет конечные стили после завершения. Это наиболее полезная настройка.
  • Как запустить анимацию в бесконечном цикле? — Установите количество итераций в infinite.
  • Лучше ли CSS-анимации JavaScript-анимаций? — Для простых декларативных эффектов CSS-анимации предпочтительнее. Для сложного секвенирования JavaScript предлагает больше контроля.