Генератор CSS-анимаций
Создавайте CSS keyframe-анимации визуально с живым предпросмотром. Выбирайте из 10 пресетов или создавайте свои keyframe. Настраивайте продолжительность, тайминг, задержку и направление. Копируйте CSS-код мгновенно — 100% бесплатно.
Предпросмотр
Пресеты анимаций
Настройки анимации
Пользовательские ключевые кадры
Сгенерированный CSS
@keyframes vurexAnim {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
}
.animated-element {
animation: vurexAnim 1s ease 0s infinite normal;
}Часто задаваемые вопросы
Генератор CSS-анимаций — это визуальный инструмент, который помогает создавать CSS @keyframes анимации без ручного написания кода. Вы можете выбирать пресеты, настраивать тайминг и продолжительность, редактировать ключевые кадры и копировать сгенерированный CSS для использования в проектах.
CSS @keyframes определяют этапы анимации. Каждый ключевой кадр указывает процентную точку на временной шкале анимации (например, 0%, 50%, 100%) и CSS-свойства в этой точке. Браузер плавно переходит между ключевыми кадрами для создания анимации.
CSS-анимации, использующие transform и opacity, ускоряются аппаратно и очень производительны. Они работают на GPU и не вызывают пересчёта макета. Для лучшей производительности избегайте анимации свойств width, height или margin.
Да, Генератор CSS-анимаций VUREX полностью бесплатный без регистрации. Создавайте неограниченное количество анимаций, настраивайте ключевые кадры и копируйте CSS-код — всё в браузере без ограничений.