@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.animated-element {
animation: fadeIn 0.6s ease 1 both;
}Wat is de 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 De tool schrijft de steno in een veilige volgorde met eerst de naam van het keyframe, laat de vertraging vallen wanneer deze nul is en laat elk onderdeel weg dat overeenkomt met de CSS-standaard, zodat de uitvoer leesbaar blijft 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.
Hoe de CSS Animation Generator gebruiken?
Kies een animatievoorinstelling
Kies een beweging uit de vooraf ingestelde lijst, zoals vervagen, inschuiven, zoomen, stuiteren, draaien, pulseren of schudden. Elke voorinstelling laadt zijn keyframes en een verstandige standaardduur en versoepeling.
Pas de timing en het afspelen aan
Stel de duur en vertraging in, kies een timingfunctie, beslis of de animatie een vast aantal keren of oneindig herhaalt, en kies een richting en vulmodus.
Preview en replay
Bekijk de animatie die wordt uitgevoerd op het voorbeeldelement en druk op replay om het opnieuw te starten Omdat een animatie op mount draait, wordt het element opnieuw afgespeeld, zodat u het zo vaak kunt zien als u wilt.
Kopieer de CSS
Kopieer de gegenereerde @keyframes-regel en de animatie-steno samen, plak ze vervolgens in uw stylesheet en pas de klasse toe op elk element.
Belangrijkste kenmerken
Keyframe Preset Library
Veertien kant-en-klare bewegingen die in- en uitgangen en looping-effecten bestrijken, van vervagen en glijden tot stuiteren, draaien, pulseren, schudden, omdraaien en hartslag, elk gedefinieerd met echte keyframe-stops
Volledige afspeelcontrole
Stel duur, vertraging, timingfunctie, iteratietelling, richting, vulmodus en afspeelstatus in en zie elke verandering in één keer weerspiegeld in de steno en de live preview
Sleutelframes en steno samen
De uitvoer bevat zowel de @keyframes-regel als de animatiesteno die eraan bindt, dus je kopieert een compleet, werkend blok in plaats van de helft van één
Schoon, Spec-Correcte Uitvoer
De afkorting wordt eerst met de naam van het sleutelframe geschreven, de vertraging wordt verlaagd als deze nul is en elke standaardwaarde wordt weggelaten, dus de gegenereerde CSS leest de manier waarop u deze met de hand zou schrijven
Frequently Asked Questions
Related Tools
CSS Grid Generator
Build CSS Grid layouts visually. Set columns, rows, track sizes, gaps and alignment with a live preview, then copy the generated grid CSS - all in your browser.
CSS Transform Generator
Build a CSS transform from translate, rotate, scale, skew and 3D perspective with live sliders and a preview, then copy production-ready code.
CSS Transition Generator
Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.
Character Counter
Count characters, words, sentences and paragraphs live as you type, estimate reading time and byte size, and check your text against social media and SEO length limits.
Comments
0 comments
No comments yet. Be the first to share your thoughts!