CSS-animationsgenerator
Skapa CSS-nyckelbildsanimationer med en visuell tidslinjeredigerare
Animationsinställningar
Färdiga animationer
Keyframes
0% → 100%
Keyframe · 0%
Keyframe · 100%
Liveförhandsvisning
Genererad CSS
@keyframes myAnimation {
0% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.animated-element {
animation-name: myAnimation;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-delay: 0s;
}Redigera keyframes och spela upp igen för att kontrollera animationen.
Snabba transformationsexempel
translateX(100px) / translateY(-50px)rotate(45deg) / rotate(360deg)scale(1.5) / scale(0.5)skewX(10deg) och skewY(-5deg)perspective(400px) + rotateY(180deg)Om CSS-animationsgenerator
Vår kostnadsfria CSS-animationsgenerator låter dig bygga professionella keyframe-animationer visuellt, utan att skriva komplex kod från grunden. Ställ in alla delar av animationen, från varaktighet och timingfunktioner till egenskaper för enskilda keyframes, och se resultatet direkt i en live-förhandsvisning som uppdateras i realtid.
Oavsett om du behöver en diskret tona in-effekt, en iögonfallande studs eller en egen animation i flera steg erbjuder verktyget 10 inbyggda mallar och en fullständig keyframe-redigerare. Varje mall kan anpassas helt, så du kan använda dem som utgångspunkt och finjustera varje egenskap, bland annat transform, opacity och bakgrundsfärg, vid valfri procentpunkt.
Generatorn skapar ren, produktionsklar CSS-kod med korrekt @keyframes-syntax och separata animationsegenskaper. Kopiera bara den genererade koden och klistra in den i din stilmall. All bearbetning sker i din webbläsare utan uppladdningar till någon server, så ditt arbete förblir privat och säkert.
Viktiga funktioner
- Visuell keyframe-redigerare med reglage för transform, opacity och background-color per keyframe
- 10 färdiga animationsmallar: Studs, Tona in, Tona ut, Glid in från vänster, Glid in från höger, Snurr, Puls, Skakning, Vändning och Zooma in
- Förhandsvisningspanel med omedelbar uppspelning på nytt för att testa animationer
- Fullständiga reglage för animationsegenskaper, bland annat varaktighet, timingfunktion, antal upprepningar, riktning, fill-läge och fördröjning
- Stöd för egna cubic-bezier-timingfunktioner för exakta easing-kurvor
- Lägg till och ta bort keyframes vid valfri procentpunkt (0 %, 25 %, 50 %, 75 %, 100 % eller egen)
- Ren CSS-utdata med @keyframes och separata animationsegenskaper, klar för produktion
- Kopiering till urklipp med ett klick för omedelbar användning i dina projekt
- Egna animationsnamn för välordnad och semantisk kod
- Fullt stöd för mörkt läge för bekvämt arbete i alla miljöer
Så använder du CSS-animationsgeneratorn
- Välj en utgångspunkt: Välj en av de 10 inbyggda mallarna, som Studs, Tona in eller Snurr, eller börja med en tom animation.
- Justera animationsegenskaper: Ange varaktighet, timingfunktion, antal upprepningar, riktning, fill-läge och fördröjning med de lättanvända reglagen.
- Redigera keyframes: Lägg till, ta bort eller ändra keyframes vid valfri procentpunkt. Ange transform-värden, opacity och bakgrundsfärger för varje keyframe.
- Förhandsgranska animationen: Se live-förhandsvisningen uppdateras i realtid. Klicka på Spela upp igen för att starta om animationen och kontrollera resultatet.
- Kopiera CSS-koden: Klicka på knappen Kopiera CSS för att kopiera den genererade @keyframes- och animationskoden till urklipp.
- Klistra in i ditt projekt: Lägg till den kopierade CSS-koden i din stilmall och tillämpa animationsklassen på dina HTML-element.
Användningsområden
- Mikrointeraktioner: Lägg till diskreta hovereffekter, knappanimationer och visuell återkoppling för att öka användarengagemanget.
- Laddningsindikatorer: Skapa egna spinners, pulseffekter och skelettskärmsanimationer för laddningstillstånd.
- Sidövergångar: Bygg effekter för glidande, toning och zoom på sidelement som animeras vid scrollning eller inläsning.
- Blickfång: Designa animationer för skakning, studs och puls som drar användarens uppmärksamhet till viktiga gränssnittselement.
- Prototyper för designsystem: Prototypa och standardisera snabbt animationsmönster i teamets komponentbibliotek.
- Lär dig CSS-animationer: Experimentera med keyframes, timingfunktioner och animationsegenskaper i en visuell miljö.
- Presentationseffekter: Skapa animerade element för webbaserade presentationer och portföljer.
Vanliga frågor
Är verktyget gratis?
Ja, CSS-animationsgeneratorn är helt gratis och utan användningsgränser. Du kan skapa obegränsat många animationer, använda alla mallar och kopiera den genererade CSS-koden utan några begränsningar.
Är mina data säkra?
All animationsgenerering och förhandsvisning sker helt i din webbläsare. Inga data skickas till någon server, så dina animationsinställningar och din CSS-kod förblir helt privata.
Vilka webbläsare stöder CSS-animationer?
CSS-animationer stöds av alla moderna webbläsare, bland annat Chrome, Firefox, Safari, Edge och Opera. Den genererade koden använder standardsyntax för @keyframes som fungerar i alla aktuella webbläsarversioner.
Kan jag kombinera flera animationer på ett element?
Ja, du kan tillämpa flera animationer på ett enda element genom att separera animationsnamnen med kommatecken i CSS. Generera varje animation för sig och kombinera dem i din stilmall.
Vad är en cubic-bezier-timingfunktion?
En cubic-bezier-funktion definierar en egen accelerationskurva för animationen. Den använder fyra värden för att styra hur animationen tar fart och bromsar in, vilket ger dig mer exakt kontroll än standardalternativ som ease-in eller ease-out.
Tips och bästa praxis
- Använd transform och opacity: Animera egenskaperna transform och opacity för bäst prestanda, eftersom de kan hårdvaruaccelereras av GPU:n.
- Håll animationerna diskreta: Diskreta animationer (0,2-0,5 s) känns mer polerade än långa, dramatiska för de flesta gränssnittsinteraktioner.
- Respektera användarens inställningar: Använd mediefrågan prefers-reduced-motion för att stänga av eller minska animationer för användare som föredrar mindre rörelse.
- Välj lämpliga fill-lägen: Använd "forwards" för att behålla slutläget, "backwards" för att tillämpa den första keyframen under fördröjningen eller "both" för full kontroll.
- Testa på flera enheter: Förhandsgranska animationerna på mobila enheter, där prestandan kan skilja sig från datorwebbläsare.