CSS-animationsgenerator
Animationsgeneratorn skapar @keyframes-animationer från 14 förval som fade in, slide in, bounce in, pulse, spin, shake och zoom, med inställningar för längd, timing-funktion och antal upprepningar.
Om verktyget
Animationsgeneratorn skapar @keyframes-animationer från 14 förval som fade in, slide in, bounce in, pulse, spin, shake och zoom, med inställningar för längd, timing-funktion och antal upprepningar.
Så använder du det
- Välj ett animationsförval.
- Ställ in längd, timing-funktion och antal upprepningar.
- Tryck på Replay för att förhandsvisa.
- Klicka på Copy CSS för att få @keyframes och animation-regeln.
Bra att veta
- En CSS-animation består av två delar: en @keyframes-regel och en animation-egenskap på elementet.
- Att animera transform och opacity är oftast det smidigaste valet för prestandan.
- Timing-funktioner som ease-out börjar snabbt och saktar in, vilket känns naturligt för element som dyker upp.
- Respektera mediafrågan prefers-reduced-motion för användare som bett om mindre rörelse.
- Oändligt antal upprepningar passar laddningsindikatorer; entréeffekter körs oftast en gång.
Körs helt i din webbläsare – inget du skriver in laddas upp eller sparas.
Vanliga frågor
Hur skapar jag en CSS-animation?
Definiera rörelsen i en @keyframes-regel och koppla den sedan med animation: name duration timing iteration. Generatorn skriver båda åt dig.
Vad är skillnaden mellan CSS-transitions och animationer?
Transitions animerar mellan två lägen när en egenskap ändras, till exempel vid hover. Animationer använder keyframes, kan starta automatiskt och kan loopa.
Hur får jag en animation att loopa för evigt?
Sätt antalet upprepningar till infinite, till exempel animation: spin 1s linear infinite.
Påverkar CSS-animationer tillgängligheten?
Stora eller ständiga rörelser kan störa vissa användare. Lägg animationer som inte är nödvändiga inom @media (prefers-reduced-motion: no-preference).