CSS Keyframes Generator
Generate CSS @keyframes animations with visual editor
Настройки анимации
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 сохранит состояние анимации
- • Комбинируйте несколько свойств в одном кадре
Related Tools
Other useful tools from the same category
CSS Gradient Generator
Create linear, radial, and conic CSS gradients with visual editor
css
gradient
+4
CSS Box Shadow Generator
Generate CSS box-shadow with visual preview and multiple shadows
css
box-shadow
+3
PX to REM/EM Converter
Convert between px, rem, and em CSS units with custom base font size
px
rem
+4