Elke ontwikkelaar heeft een blok gekopieerd van @keyframes uit een Stack Overflow antwoord, in geplakt, opgefrist, en vond het element perfect stilzitten Negen van de tien keer is de reden saai: de animatienaam in de @keyframes rule kwam niet overeen met de naam in de animation steno, of de duur bleef op nul, of de klasse kwam nooit op het element terecht De andere reden is dat keyframe animatie een van die hoeken van CSS is waar je het resultaat niet kunt beoordelen door de code te lezen Een opeenvolging van percentages en transformaties vertelt je niets over of de beweging soepel, pittig of zeeziek aanvoelt totdat je hem ziet lopen.
Een CSS-animatie is het browser' s mechanisme om een element in de loop van de tijd door een benoemde reeks stijlen te verplaatsen In tegenstelling tot een overgang, die een enkele verandering animeert en wacht op een trigger, volgt een animatie een @keyframes script met zoveel stappen als je wilt, kan voor altijd loopen, en begint op zichzelf op het moment dat het wordt toegepast Het is wat het laden van spinners, aandachtspulsen, ingangseffecten en elk stukje ambient motion dat een interface levend doet voelen mogelijk maakt Maar de twee helften, de keyframes en de steno, moeten het precies eens worden, en de steno verpakt zeven of acht waarden in één regel in een volgorde die de meeste mensen nooit onthouden.
de CSS Animation Generator verwijdert het giswerk U kiest een beweging uit een bibliotheek met presets, past de duur, versoepeling, vertraging, iteratietelling en richting aan en ziet het afspelen op een live preview element De tool schrijft beide de @keyframes regel en de matching animation steno in een kopieerklaar vakje, met de namen al gesynchroniseerd, dus het blok dat je plakt werkt de eerste keer.
tl;dr: Een CSS-animatie verplaatst een element door een
@keyframesvolgorde in de tijd, en in tegenstelling tot een overgang heeft het geen trigger nodig en kan het lus maken De@keyframesnaam en deanimation-namemoet exact overeenkomen, wat de meest voorkomende reden is dat een animatie niets doet De afkorting draagt naam, duur, timing-functie, vertraging, iteratie-telling, richting en vul-modus De voorkeur geven aan animerentransformenopacityvoor een soepele, samengestelde beweging Deze generator geeft u veertien presets, volledige afspeelcontrole en een live preview, en zendt zowel de keyframes als de steno samen uit.Het draait volledig in uw browser zonder aanmelding.
Welk probleem lost een CSS-animatiegenerator op?
Het ongemakkelijke aan keyframe animatie is de round trip Om een bounce met de hand af te stemmen schrijf je de @keyframes regel, schrijf de animation line, sla het bestand op, schakel over naar de browser, wacht op het herladen en kijk. Als de bounce te agressief is, verander je er een translateY waardeer en doe de hele loop opnieuw Omdat die cyclus traag is, accepteren de meeste mensen de eerste versie die er niet gebroken uitziet in plaats van de versie die goed aanvoelt, en het verschil tussen die twee is precies de lak die een beschouwde interface van een sjabloon scheidt.
Een generator stort die lus in één klik in U kiest een voorinstelling, sleept de duurschuif en het voorbeeldelement speelt de beweging onmiddellijk voor u uit Schakel de timingfunctie uit ease naar een beziercurve en de verandering in gevoel is instant Stel de iteratietelling in op oneindig en de animatielussen zodat je het kunt bestuderen Na een paar minuten hiervan bouw je een intuïtie op voor hoe zeshonderd milliseconden eruit ziet tegen twaalfhonderd, wat het gevoel is dat je nodig hebt om overal elders goede bewegingsbeslissingen te nemen.
Er is ook een correctheidsargument Je kunt geen misvormde produceren animation waarde door te kiezen uit menu's en schuifregelaars te slepen, en u kunt de naam van het sleutelframe niet verkeerd typen, omdat het gereedschap de steno bindt aan de keyframes die het heeft gegenereerd De uitvoer is altijd veilig om te plakken Die betrouwbaarheid is dezelfde reden waarom ik visuele CSS-bouwers dichtbij houd voor andere eigenschappen, hetzelfde instinct achter het bereiken van de gradiëntgenerator in plaats van kleurstops in mijn hoofd te tellen, of de doosschaduwgenerator in plaats van te gokken op onscherpe stralen.
Hoe verschilt een CSS-animatie van een CSS-overgang?
Dit brengt mensen constant naar boven, dus het is de moeite waard om precies te zijn Een overgang bezielt een enkele eigenschap tussen twee toestanden en vereist iets om te veranderen, een hover, een focus, een omgeschakelde klasse, voordat deze draait Het heeft een startwaarde en een eindwaarde en niets daartussenin Een animatie volgt daarentegen een @keyframes regel die een willekeurig aantal tussenstappen kan definiëren, zodat het element door een hele choreografie kan bewegen in plaats van door een rechte lijn van A naar B. Het wacht ook nergens op: pas het toe en het speelt.
Het praktische gevolg is dat je naar een overgang grijpt wanneer je een statusverandering wilt gladstrijken, en naar een animatie wanneer je beweging wilt die intrinsiek is aan het element Een knop die donkerder wordt bij hover is een overgang Een spinner die eeuwig draait, een badge die pulst om het oog te trekken, of een kaart die omhoog schuift als de pagina wordt geladen zijn allemaal animaties, omdat de beweging vanzelf gebeurt en zich vaak herhaalt Als je nog steeds beslist welke een bepaald effect nodig heeft, is de vuistregel eenvoudig: als een gebruikersactie het start en het gaat een kant op, gebruik dan een overgang; als het op zichzelf speelt, loopt of meer dan twee stappen heeft, gebruik dan een animatie De CSS-overgangsgenerator is het begeleidende hulpmiddel voor het eerste geval, en de twee bestrijken het grootste deel van de beweging die je ooit zult schrijven.
| Aspect | Transition | Animatie |
|---|---|---|
| Trigger | Heeft een toestandsverandering nodig (zweven, focus, klasse) | Begint vanzelf wanneer toegepast |
| Steps | Twee, een begin en een einde | Elk nummer, via @keyframes |
| Looping | Nee, draait één keer per wissel | Ja, met iteration-count |
| Typisch gebruik | Zweef- en focuseffecten | Spinners, pulsen, ingangen |
Wat is de juiste volgorde van de animatie steno?
de animation steno is dicht Het kan de naam van het sleutelframe, de duur, de timingfunctie, de vertraging, het aantal iteraties, de richting, de vulmodus en de afspeelstatus dragen, allemaal op één regel, en de volgorde is belangrijk voor de twee tijdwaarden, precies zoals bij overgangen. Deze generator schrijft eerst de naam, dan de duur en de timingfunctie, dan bijvoorbeeld de optionele vertraging, dan het aantal iteraties, de richting en de vulmodus animation: fadeIn 0.6s ease 1 both. Het eerst schrijven van de naam is legaal omdat keyframe-namen geen CSS-trefwoorden zijn en het duidelijker leest dan het begraven van de naam aan het einde.
De enige regel die iedereen vangt zijn de twee tijdswaarden De duur en de vertraging zijn beide keren, en CSS vertelt ze alleen per positie: de eerste tijdswaarde is de duur en de tweede is de vertraging Al het andere in de afkorting is een trefwoord of een unitless getal, dus het kan niet verward worden met een tijd Daarom kan het gereedschap de vertraging veilig laten vallen als deze nul is, omdat een unitless 1 of het woord infinite dat volgt is onmiskenbaar de iteratietelling, niet een tweede keer De generator laat ook elke waarde weg die gelijk is aan zijn CSS-standaard, dus a normal richting of een none fill-mode clutters nooit de uitvoer Het resultaat is een afkorting die leest zoals je het met de hand zou schrijven zodra je de regels kende.
Waarom wordt mijn CSS-animatie niet afgespeeld?
Dit is de klif, en bijna iedereen loopt er minstens één keer van af De meest voorkomende oorzaak is een mismatch tussen de animation-name en de naam in de @keyframes regel Een typefout, een hoofdletterverschil, of een naam die op de ene plaats hernoemd is en niet de andere, laat de browser geen keyframe regel om aan te binden, dus doet het stilletjes niets Er is geen fout en geen waarschuwing; het element zit er gewoon in Omdat deze generator beide helften samen schrijft vanuit dezelfde naam, verdwijnt die hele klasse bug, wat een groot deel van het punt is.
De andere oorzaken zijn de moeite waard om te weten, omdat ze verschijnen wanneer je animaties met de hand schrijft Een duur van nul betekent dat de animatie direct voltooid is en je het nooit ziet Een element dat is display: none voert zijn animaties helemaal niet uit, dus een fade-in die afhangt van het element dat wordt weergegeven, zal niet vuren Een ontbrekende of verkeerd gespelde eigenschap in een sleutelframe wordt stilletjes genegeerd in plaats van gemarkeerd. En een animatie met animation-fill-mode: none, de standaard, knipt het element terug naar zijn unanieme stijlen zodra het klaar is, wat eruit kan zien alsof het nooit is uitgevoerd als de beweging subtiel was. Als je de animatie in een live preview bekijkt, komen de meeste hiervan binnen enkele seconden naar boven, wat het geval is voor het bouwen van beweging waarbij je het kunt zien in plaats van in een bestand dat je blijft herladen.
Wat doet animatie-fill-mode?
Vulmodus is de instelling die mensen als laatste begrijpen en het meest nodig hebben Het bepaalt welke stijlen het element toont buiten de animatie' s actief venster, zowel voordat het begint tijdens een eventuele vertraging en nadat het is afgelopen De standaard, none, betekent dat het element de eerste en laatste keyframes negeert wanneer de animatie niet draait, dus het zit in zijn normale stijlen vóór de animatie en klikt daarna weer naar hen terug. Die snap-back is de bron van een veel voorkomende frustratie: je animeert een element om in te vervagen, het vervaagt prachtig en verdwijnt weer zodra de animatie eindigt, want met none de finale opacity: 1 keyframe wordt weggegooid zodra de animatie voorbij is.
De oplossing is animation-fill-mode: forwards, waardoor het laatste sleutelframe wordt toegepast nadat de animatie is voltooid, zodat het vervaagde element zichtbaar blijft. backwards past het eerste keyframe toe tijdens elke vertraging voordat de animatie start, wat handig is wanneer u een vertraging heeft en niet wilt dat het element eerst in de standaardstatus knippert. both doet beide tegelijk en is de veiligste algemene keuze voor ingangsanimaties. Daarom is deze generator standaard nieuwe animaties both. Het begrijpen van de vulmodus is het verschil tussen een ingang die landt en een ingang die zichzelf ongedaan maakt, en het is veel gemakkelijker te begrijpen door deze in een voorbeeld om te schakelen en de eindverandering te bekijken dan door de specificatie koud te lezen.
Wanneer moet een animatie loopen, en hoe regel ik deze?
Iteratietelling bepaalt hoe vaak de animatie wordt uitgevoerd Zet het op een positief geheel getal en de animatie herhaalt dat vele malen en stopt dan; stel het in op infinite en het loopt voor altijd Looping animaties zijn de juiste keuze voor ambient, doorlopende beweging, een spinner die laat zien dat er werk aan het gebeuren is, een puls die een call-to-action levend houdt, een subtiele float die een heldenbeeld wat leven geeft One-shot animaties, eenmalig uitgevoerd, zijn voor in - en uitgangen, waarbij de beweging een duidelijk begin en einde heeft en het herhalen ervan zou afleidend zijn.
Richting paren met iteratietelling om vorm te geven hoe elke pas loopt De standaard normal speelt elke iteratie af vanaf het eerste keyframe tot het laatste. reverse speelt ze allemaal achteruit. alternate voert de eerste pass naar voren en de volgende naar achteren uit, pingponging tussen de eindpunten, en zo bouw je een vloeiende heen-en-weer-puls op zonder een terugreis in de keyframes te definiëren. alternate-reverse begint achteruit en wisselt van daaruit af De generator stelt ze alle vier bloot zodat je het verschil kunt voelen: een puls met alternate ademt op natuurlijke wijze in en uit, terwijl dezelfde keyframes met normal en een even aantal stappen moet de terugkeer zelf coderen Voor looping-beweging, alternate levert bijna altijd het meer organische resultaat op met minder keyframe werk.
Welke eigenschappen moet ik animeren voor soepele prestaties?
De eigenschappen die je animeert beslissen of de beweging op een vloeiende zestig frames per seconde loopt of stottert, en de keuze is dezelfde als voor overgangen Voorkeur transform en opacity. Beide kunnen aan de compositor worden overhandigd en geanimeerd zonder dat de browser de pagina-indeling opnieuw berekent, zodat ze zelfs op bescheiden hardware en onder belasting soepel blijven. Dit is de reden waarom een kaart die omhoog schuift transform: translateY voelt moeiteloos terwijl dezelfde kaart geanimeerd is met top of margin-top voelt ruw aan Elke ingangsvoorinstelling in deze generator is erop gebouwd transform en opacity Om deze reden precies.
De eigenschappen om animaties in een keyframe-reeks te voorkomen, zijn de eigenschappen die de lay-out activeren: width, height, top, left, margin en padding. Het veranderen van een van deze dwingt de browser om de geometrie van het element en alles eromheen op elk frame opnieuw te berekenen, wat duur is en de meest voorkomende oorzaak van janky animatie is, wat nog erger wordt wanneer de animatie doorloopt en die kosten continu betaalt Als je wilt dat een element groeit, a transform: scale is bijna altijd goedkoper dan animeren width en height, en het ziet er bijna identiek uit Het bredere argument voor het samenstellen van een set gereedschappen die je naar het goedkope pad sturen, ligt in de Webontwikkelaar Toolkit stuk, en de workflowgewoonten die beweging tot een snelle beslissing maken in plaats van een langzame beslissing, zijn in de praktijk Productiviteitstools voor ontwikkelaar guide.
Hoe houdt de generator de preview eerlijk?
Elke visuele bouwer riskeert het voorbeeld en de geëxporteerde code die uit elkaar drijft totdat de tool u een waarde leert die zich niet zal reproduceren Deze generator injecteert de exacte @keyframes regel dat het wordt uitgevoerd op de pagina en pas het exacte toe animation steno het toont u aan het voorbeeldelement, dus de beweging die u bekijkt is de beweging die uw gekopieerde CSS zal produceren Er is geen apart animatiepad dat het niet eens kan zijn, en de naam van het sleutelframe in de preview is de naam in de uitvoer.
Omdat een animatie op mount draait en vervolgens eindigt, heeft de preview een manier nodig om deze opnieuw af te spelen, wat de tool afhandelt door het preview-element opnieuw te monteren wanneer u op replay drukt. Dat weerspiegelt hoe een eenmalige animatie zich gedraagt in de productie, waar deze wordt afgespeeld wanneer het element verschijnt en vervolgens zijn eindtoestand behoudt volgens de vulmodus. De uitvoer blijft ook minimaal, waardoor de nulvertraging en de standaardwaarde worden verlaagd, zodat u alleen betekenisvolle declaraties kopieert, dezelfde discipline waarbij niets redundants wordt uitgezonden dat door de CSS filter generator en de andere visuele bouwers Wanneer je een keyframe animatie koppelt aan een lay-out die het element positioneert, zal de flexbox generator is een natuurlijke metgezel voor het bouwen van de omringende structuur.
Welke browsers ondersteunen CSS-animaties?
CSS-animaties worden in elke huidige browser ondersteund en zijn dat al ruim tien jaar. De @keyframes regel, de animation steno en al zijn longhands zijn universeel en ongeprefixeerd, dus de uitvoer van deze generator werkt in Chrome, Firefox, Safari en Edge zonder leveranciersvoorvoegsels of fallbacks De definitieve referentie is de CSS Animations Level 1-specificatie van de W3C, die de primaire bron is voor hoe elk deel van de steno zich gedraagt, en het is de moeite waard om te lezen zodra de generator u een fysiek gevoel heeft gegeven voor wat de stukken doen Voor toegankelijkheid, onthoud dat sommige gebruikers een prefers-reduced-motion voorkeur, en het is een goede gewoonte om niet-essentiële looping-animatie te verpakken in een mediavraag die deze respecteert, zodat ambient motion kan worden uitgeschakeld voor mensen die het ongemakkelijk vinden.
Als u een bredere set visuele CSS-tools assembleert, worden de overgangsgenerator en de CSS-transformatiegenerator ga hier op natuurlijke wijze naast zitten, aangezien transformaties de grondstof zijn. De meeste van deze animaties bewegen en transities verwerken de statuswijzigingen die animaties niet uitvoeren. Alles hier draait aan de clientzijde, en de CSS die u kopieert is van u om te gebruiken zonder looptijd, zonder bouwstap en zonder afhankelijkheid.
Veelgestelde vragen
Wat is een CSS animatie generator?
Een CSS-animatiegenerator is een visueel hulpmiddel dat een keyframe-animatie bouwt op basis van de instellingen die u kiest. U kiest een voorinstelling, stelt de duur, versoepeling, vertraging, iteratietelling en richting in en voert de @keyframes regel en de animation steno samen met een live preview kun je opnieuw afspelen.
Wat is het verschil tussen een CSS-animatie en een CSS-overgang?
Een overgang animeert een enkele verandering tussen twee toestanden en heeft een trigger nodig, zoals hover to run. Een animatie volgt een @keyframes volgorde met een willekeurig aantal stappen, kan een lus maken en begint vanzelf zodra deze wordt toegepast, zonder te wachten op een statuswijziging.
Welke volgorde gebruikt de animatie steno?
Deze tool schrijft eerst de naam van het keyframe, daarna duur, timing-functie, vertraging, iteratie-telling, richting en vul-modus, bijvoorbeeld animatie: fadeIn 0.6s gemak 1 beide De eerste tijdswaarde is altijd de duur en de tweede is de vertraging, dus een enkele tijdswaarde wordt gelezen als de duur.
Hoe maak ik voor altijd een CSS-animatielus?
Stel de iteratietelling in op oneindig, In de afkorting is dat het woord oneindig, zoals in animatie: spin 1s lineair oneindig Elk positief geheel getal herhaalt in plaats daarvan de animatie die vele malen en stopt dan volgens de vulmodus en - richting.
Waarom wordt mijn CSS-animatie niet afgespeeld?
De meest voorkomende oorzaak is een mismatch tussen de animatienaam en de naam @keyframes, inclusief een typefout of een hoofdletterverschil, waardoor de browser geen regel heeft om aan te binden. Controleer ook of de duur boven nul ligt en of het element wordt weergegeven, aangezien een animatie op een display: geen enkel element wordt niet uitgevoerd.
Wat doet de eigenschap animatie-fill-mode?
De vulmodus bepaalt welke stijlen het element toont voordat de animatie begint en nadat deze is beëindigd De standaardnone knipt het element terug naar zijn normale stijlen wanneer de animatie is afgelopen Door vooruit te zetten blijft het uiteindelijke keyframe behouden, achterwaarts wordt het eerste keyframe toegepast tijdens een vertraging, en beide doen beide.
Welke eigenschappen moet ik animeren voor soepele prestaties?
Liever transformatie en dekking De browser kan ze animeren op de compositor zonder de lay-out opnieuw te berekenen, zodat ze soepel blijven bij 60 fps Animeren breedte, hoogte, boven, links of marge dwingt een lay-out herberekening op elk frame, wat de gebruikelijke reden is dat een animatie stottert.
Is de gegenereerde animatie CSS gratis en veilig te gebruiken?
Ja. de tool is volledig gratis zonder aanmeldings - of gebruikslimieten, en het zendt standaard, niet-voorafgestelde CSS uit die in elke moderne browser wordt ondersteund Alle verwerking gebeurt in uw browser, dus er wordt niets geüpload en de tool werkt offline zodra deze is geladen.
