Към съдържанието

CSS Animation генератор

Създайте CSS keyframe анимации визуално с преглед на живо. Изберете от предварителни настройки като bounce, pulse, shake, spin. Коригирайте продължителност, синхронизация и др. Копирайте CSS кода. Безплатен онлайн инструмент.

Преглед

1.0s
0.0s

CSS изход

 

Какво са CSS анимациите?

CSS анимациите ви позволяват да анимирате преходи между стойности на CSS свойства с течение на времето. Те се състоят от две части: правила @keyframes, които дефинират етапите на анимацията, и свойството animation, което контролира синхронизацията, посоката и възпроизвеждането.

Предварителни настройки за анимация

Този инструмент включва често използвани предварителни настройки: bounce (вертикално отскачане), pulse (мащабиране нагоре-надолу), shake (хоризонтално разтърсване), spin (360° завъртане), fadeIn/fadeOut (преходи на непрозрачност), slideIn/slideOut (плъзгане отстрани), swing (махалово завъртане) и wobble (асиметрично разтърсване).

Поверителност

Цялото генериране на анимации работи 100% във вашия браузър. Никакви данни не се изпращат на сървър.