Generator de Animații CSS
Generatorul de animații CSS creează animații @keyframes din 14 presetări, precum fade in, slide in, bounce in, pulse, spin, shake și zoom, cu control pentru durată, funcția de timing și numărul de repetări.
Despre acest instrument
Generatorul de animații CSS creează animații @keyframes din 14 presetări, precum fade in, slide in, bounce in, pulse, spin, shake și zoom, cu control pentru durată, funcția de timing și numărul de repetări.
Cum se folosește
- Alege o presetare de animație.
- Setează durata, funcția de timing și numărul de repetări.
- Apasă Replay pentru previzualizare.
- Apasă Copy CSS pentru a obține @keyframes și regula animation.
Bine de știut
- O animație CSS are două părți: o regulă @keyframes și o proprietate animation pe element.
- Animarea transform și opacity este de obicei cea mai fluidă alegere din punct de vedere al performanței.
- Funcțiile de timing precum ease-out pornesc rapid și încetinesc, ceea ce pare natural pentru intrări.
- Respectă media query-ul prefers-reduced-motion pentru utilizatorii care au cerut mai puțină mișcare.
- Un număr infinit de repetări se potrivește loaderelor; efectele de intrare rulează de obicei o singură dată.
Funcționează complet în browserul tău — nimic din ce introduci nu este încărcat sau salvat.
Întrebări frecvente
Cum creez o animație CSS?
Definește mișcarea într-o regulă @keyframes, apoi atașeaz-o cu animation: name duration timing iteration. Generatorul le scrie pe amândouă pentru tine.
Care este diferența dintre tranzițiile și animațiile CSS?
Tranzițiile animează trecerea între două stări când se schimbă o proprietate, de exemplu la hover. Animațiile folosesc keyframes, pot rula automat și se pot repeta.
Cum fac o animație să se repete la infinit?
Setează numărul de repetări la infinite, de exemplu animation: spin 1s linear infinite.
Animațiile CSS afectează accesibilitatea?
Mișcările ample sau continue pot deranja unii utilizatori. Include animațiile neesențiale în @media (prefers-reduced-motion: no-preference).