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 Gradient генератор
Создавайте линейные, радиальные и конические градиенты с визуальным редактором
css
gradient
+4
CSS Box-shadow генератор теней
Создавайте CSS тени с визуальным предпросмотром
css
box-shadow
+3
Конвертер единиц CSS
Конвертируйте пиксели в rem и em единицы с настраиваемым базовым размером
px
rem
+4