CSS Keyframes генератор
Генерируйте 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 сохранит состояние анимации
- • Комбинируйте несколько свойств в одном кадре
Похожие инструменты
Другие полезные инструменты из той же категории
CSS градиент генератор
Создавайте линейные, радиальные и конические CSS градиенты с визуальным редактором
css
gradient
+4
CSS Box Shadow генератор
Генерируйте CSS box-shadow с визуальным предпросмотром и множественными тенями
css
box-shadow
+3
PX в REM/EM конвертер
Конвертируйте между px, rem и em CSS единицами с настраиваемым базовым размером шрифта
px
rem
+4