UTILS.
100% у браузері
⤿

Генератор CSS-анімації

Створіть анімацію keyframe, перегляньте її наживо та скопіюйте CSS.

Про цей інструмент

Виберіть готову анімацію з тривалістю, функцією тайминга та кількістю повторів, спостерігайте, як вона працює наживо, потім скопіюйте правила @keyframes та animation. Усе працює у вашому браузері.

Поширені запитання

Що контролює кількість повторів?
Вона задає, скільки разів програється анімація; виберіть infinite для нескінченного циклу або число, щоб запустити її стільки разів.
Як перезапустити анімацію?
Натисніть «Повторити» — це на мить видаляє та повторно застосовує анімацію, тож перегляд програється знову з першого кадру.

Більше інструментів