Генератор CSS анимаций
Создавайте CSS анимации с keyframes с визуальным предпросмотром
Настройки анимации
1s
0s
Ключевые кадры
%
transform:%
transform:%
transform:Сгенерированный CSS
@keyframes myAnimation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.animated-element {
animation-name: myAnimation;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: 1;
}
/* Сокращенная запись */
.animated-element {
animation: myAnimation 1s ease 1;
}Предпросмотр
DEMO
Готовые анимации
Советы
- • Используйте transform для лучшей производительности
- • Избегайте анимации width/height, используйте scale
- • will-change подготовит браузер к анимации
- • animation-fill-mode сохранит состояние анимации
- • Комбинируйте несколько свойств в одном кадре
Похожие инструменты
Другие полезные инструменты из той же категории