Generátor CSS Animací — Keyframe Animace bez Psaní Kódu

CSS animace mohou vytvářet složité pohybové efekty bez JavaScriptu. Náš generátor umožňuje vizuálně sestavit keyframe animace a generuje @keyframes kód, který můžete přímo použít.

Struktura keyframe animací

@keyframes název { from { ... } to { ... } } pro jednoduché dvoustavové animace. Používejte procenta (0 %, 50 %, 100 %) pro více mezilehlých stavů. Vlastnost animation propojuje @keyframes s prvkem.

Funkce easingu

ease je výchozí (pomalý start, zrychlení, pomalý konec). linear je konstantní. ease-in zpomaluje na konci. ease-out zrychluje na začátku. cubic-bezier() vytváří vlastní easing křivky. Správný easing dělá animace přirozenějšími.

Výkon

Animujte pouze transform a opacity pro GPU akceleraci. Vyhněte se animování width, height, margin nebo padding — to spouští přepočty rozvržení. Použijte will-change: transform pro složité animace k přípravě GPU.