Generator för CSS-animation
Justera rörelseförinställningar eller nyckelramar och spela upp animationen för att kontrollera den. Hämta CSS att använda på en webbsida och ett HTML-användningsexempel.
Det här kan du göra
Justera rörelse från en förinställning
Välj bland 12 typer, bland annat inträde, utträde och rotation. Ändra varaktighet och upprepning så att det passar ditt användningsområde.
Redigera även mellanlägen
Ange förflyttning, rotation, skala och opacitet för varje nyckelram och kontrollera den genererade rörelsen.
Få CSS och HTML
Kopiera eller spara animations-CSS:en och ett HTML-användningsexempel med samma klass.
Så använder du verktyget
Välj en förinställning
Välj den rörelse du vill ha och ange varaktigheten för 1 uppspelning. Att välja en annan förinställning ersätter också de inställningar du har justerat.
Justera endast det du behöver
Öppna uppspelningsdetaljerna eller nyckelramarna för att ändra mellanrörelse, riktning, upprepning och andra inställningar.
Generera och spela upp
Kontrollera med ”Generera CSS och förhandsgranska”. Om du ändrar några inställningar genererar du igen.
Få CSS och HTML
Tillämpa CSS:en och lägg till klassen toollet-motion i ett HTML-element. Använd HTML-användningsexemplet tillsammans med CSS:en.
Användbart när
Skapa en inträdesanimation
Använd en förinställning för toning in eller inträde nedifrån för att justera inträdesrörelsen och hastigheten.
Rörelse vid interaktion med en knapp
Ändra startvillkoret till hover eller tangentbordsfokus för att skapa rörelse som svarar på interaktion.
Förstå nyckelramar och uppspelningsvillkor
Mellanlägen och varaktighet
En nyckelrams % är dess position under 1 uppspelning. För en animation på 1 sekund ligger 50% vid 0,5 sekunder. Easing avgör hur värdena ändras mellan nyckelramarna.
Förflyttning, rotation och utseende
Horisontell/vertikal position är hur mycket elementet förflyttas från ursprungspositionen. En skala på 1 är ursprungstorleken; en opacitet på 0 är genomskinlig och 1 är ogenomskinlig.
Fördröjning, upprepning och riktning
Fördröjningen läggs bara till en gång innan uppspelningen börjar. För begränsad uppspelning är tiden totalt fördröjning + varaktighet för 1 uppspelning × antal upprepningar. Växlande växlar mellan framåt- och bakåtriktning.
Tillstånd före och efter uppspelningen
Välj vilket tillstånd som visas under fördröjningen och efter att uppspelningen tar slut. Omvänd och växlande inställningar ändrar vilka nyckelrampositioner som används i början och slutet av uppspelningen.
Inställningar för minskad rörelse
Den genererade CSS:en respekterar enhetens inställning för minskad rörelse. Den stoppar animationen och använder det slutläge som bestäms av den konfigurerade riktningen och upprepningsantalet. För oändlig uppspelning används slutet av den första uppspelningen.
Vanliga frågor
Kan jag spela upp den bara en gång?
Stäng av ”Fortsätt upprepa” och sätt antalet upprepningar till 1. Standardförinställningar börjar med 1 uppspelning, medan rotation och svävning börjar med kontinuerlig upprepning aktiverad.
Vilket element ska jag tillämpa CSS:en på?
Lägg till klassen toollet-motion i ett HTML-element och använd den tillsammans med den genererade CSS:en. HTML-exemplet är ett fragment med ett knappelement, inte en komplett fristående webbsida.
Hur många nyckelramar kan jag skapa?
Du kan ha 2–8 nyckelramar, inklusive början på 0% och slutet på 100%. När du lägger till en nyckelram placeras den mitt i det bredaste intervallet. Början och slutet kan inte tas bort, och bara deras % positioner är låsta.
Förhandsvisningen försvann efter att jag ändrade en inställning.
Resultaten rensas när inställningarna ändras så att du inte av misstag använder rörelse eller kod från tidigare inställningar. Generera igen för att kontrollera de aktuella inställningarna.
Varför rör sig inte förhandsvisningen?
Rörelsen stoppas när minskad rörelse är aktiverad på din enhet. För inställningar för hover och fokus kontrollerar du även startvillkoren. Förhandsvisningen pausas när du lämnar den här fliken.
Kan jag använda flera animationer på samma sida?
De genererade klass- och nyckelramnamnen delas. Vill du använda separata animationer ändrar du båda namnen för varje animation och tar med ändringarna i motsvarande HTML.
Indata och resultat
- Inställningar
- 12 förinställningar, 2–8 nyckelramar och en varaktighet på 0,2–60 sekunder.
- Uppspelning
- En fördröjning på 0–60 sekunder, 1–100 upprepningar eller oändlig upprepning, easing, riktning, tillstånd före och efter uppspelningen samt startvillkor.
- Utdata
- CSS och ett HTML-användningsexempel. Endast rörelsen definieras; ingen komplett webbsida eller videofil skapas.