Генератор CSS-анімацій та ключових кадрів

CSS-анімації vs JavaScript-анімації

CSS-анімації виконуються браузером без участі JavaScript — це означає кращу продуктивність, особливо для простих ефектів. Складні інтерактивні анімації краще реалізовувати в JavaScript (GSAP, Framer Motion). Але для переходів при завантаженні, hover-ефектів і декоративних анімацій CSS є ідеальним вибором.

Синтаксис @keyframes

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }. Використання: animation: fadeIn 0.3s ease-in-out forwards. Параметри: duration, timing-function, delay, iteration-count, direction, fill-mode. forwards зберігає фінальний стан після завершення анімації. infinite для нескінченного повторення.

Функції часу анімації

ease — повільний старт, прискорення, повільне завершення (за замовчуванням). linear — однакова швидкість. ease-in — повільний старт. ease-out — повільне завершення. cubic-bezier(x1, y1, x2, y2) — довільна крива. steps(n) — покадрова анімація. Spring-анімація (різкий, пружний рух) поки не підтримується нативно в CSS.

Продуктивність CSS-анімацій

Анімуйте тільки opacity та transform — вони виконуються на GPU і не викликають перемальовування. Уникайте анімації width, height, top, left — вони спричиняють reflow всього макету. will-change: transform підказує браузеру оптимізувати елемент заздалегідь, але використовуйте обережно.