CSS Animation Generator

De CSS Animation Generator is een visuele editor voor CSS-sleutelframe-animaties U kiest een motion preset zoals fade in, slide, zoom, bounce, spin of pulse, past de duur, timingfunctie, vertraging, iteratietelling, richting en vulmodus aan, kijkt hoe deze in een live preview wordt uitgevoerd, en kopieert vervolgens twee dingen: de @keyframes-regel die de beweging definieert en de animatie steno die deze speelt Het verandert een blok CSS dat de meeste mensen uit het geheugen of een raamwerk kopiëren in iets dat je kunt vormen en zien voordat het je stylesheet bereikt.

Een CSS-animatie heeft twee helften die overeen moeten komen De @keyframes-regel noemt een reeks stappen, elk geschreven als een percentage offset met de eigenschapswaarden die het element op dat punt moet vasthouden, bijvoorbeeld 0% bij opaciteit 0 en 100% bij opaciteit 1. De animatie-eigenschap verwijst vervolgens naar die keyframenaam en bepaalt hoe deze wordt afgespeeld: hoe lang het duurt, hoe het versoepelt, hoe lang te wachten voordat het begint, hoe vaak te herhalen en in welke richting elke pass draait Een verkeerd gespelde naam is de meest voorkomende reden waarom een animatie stilletjes niets doet, omdat de browser geen regel heeft om aan te binden.

Alles draait in uw browser Kies een voorinstelling, sleep de schuifregelaars voor duur en vertraging, schakel de versoepelingscurve in, stel de animatie in op voor altijd of een vast aantal keren herhalen en druk op replay om deze opnieuw te bekijken Het gereedschap schrijft de steno in een veilige volgorde met eerst de naam van het keyframe, laat de vertraging vallen wanneer deze nul is, en laat de richting weg wanneer deze normaal is en de vulmodus wanneer deze geen is, zodat de uitvoer leesbaar blijft De iteratietelling en timingfunctie worden altijd geschreven, zelfs bij hun standaardinstellingen Er is geen account, er wordt niets geüpload en de generator blijft werken zodra de pagina is geladen.

Het maakt ook de prestatieafwegingen zichtbaar De presets animeren transformatie en dekking waar mogelijk, omdat die twee eigenschappen worden afgehandeld door de compositor en de browser niet dwingen om de lay-out opnieuw te berekenen, zodat ze soepel blijven bij hoge framesnelheden Animeren van breedte, hoogte, boven of marge in plaats daarvan herberekent de pagina op elk frame en is de gebruikelijke oorzaak van stotteren Het zien van een stuiter opgebouwd uit translateY in plaats van top is een snellere les waarom men soepel is dan enige hoeveelheid lezen erover.

Dit is wat deze CSS-animatiegenerator voor één preset produceert, zodat u deze kunt vergelijken met uw eigen exemplaar Klik op Bounce en de bedieningselementen laden 1200 ms, ease en Infinite, terwijl de vulmodus standaard blijft van beide CSS kopiëren geeft u de bounceregel met zeven stops @keyframes plus een regel met .animated-elementen die animatie bevat: bounce 1.2s vergemakkelijken oneindig beide; Sleep Delay naar 300 ms en de steno wordt bounce 1.2s ease 0.3s oneindig beide, met de vertraging die na de timingfunctie wordt geplaatst Elke animatiegenerator CSS-uitvoer moet die volgorde volgen, omdat de eerste tijdswaarde altijd als de duur wordt gelezen.