Generátor CSS animací
Generátor CSS animací vytváří animace @keyframes ze 14 předvoleb, jako je fade in, slide in, bounce in, pulse, spin, shake a zoom, s nastavením délky, časovací funkce a počtu opakování.
O tomto nástroji
Generátor CSS animací vytváří animace @keyframes ze 14 předvoleb, jako je fade in, slide in, bounce in, pulse, spin, shake a zoom, s nastavením délky, časovací funkce a počtu opakování.
Jak ho použít
- Vyber předvolbu animace.
- Nastav délku, časovací funkci a počet opakování.
- Stiskni Replay a podívej se na náhled.
- Klikni na Copy CSS a získej @keyframes i pravidlo animation.
Dobré vědět
- CSS animace má dvě části: pravidlo @keyframes a vlastnost animation na prvku.
- Animace transform a opacity bývá z hlediska výkonu nejplynulejší volba.
- Časovací funkce jako ease-out začínají rychle a zpomalují, což u nástupových efektů působí přirozeně.
- Respektuj media query prefers-reduced-motion u uživatelů, kteří si vyžádali méně pohybu.
- Nekonečný počet opakování se hodí pro loadery; nástupové efekty obvykle proběhnou jednou.
Běží celý ve vašem prohlížeči — nic, co zadáte, se nenahrává ani neukládá.
Časté dotazy
Jak vytvořím CSS animaci?
Pohyb definuj v pravidle @keyframes a pak ho připoj pomocí animation: name duration timing iteration. Generátor ti napíše obojí.
Jaký je rozdíl mezi CSS transitions a animacemi?
Transitions animují přechod mezi dvěma stavy při změně vlastnosti, například při hoveru. Animace používají keyframes, můžou běžet automaticky a opakovat se.
Jak nastavím, aby se animace opakovala donekonečna?
Nastav počet opakování na infinite, například animation: spin 1s linear infinite.
Ovlivňují CSS animace přístupnost?
Výrazný nebo nepřetržitý pohyb může některým uživatelům vadit. Nepodstatné animace obal do @media (prefers-reduced-motion: no-preference).