CSS Keyframe-animatiegenerator

Een CSS @keyframes-regel is eigenlijk een kleine tijdlijn: een reeks procentuele controlepunten, die elk aangeven hoe een eigenschap er op dat exacte moment uit zou moeten zien, waarbij de browser alles daartussenin interpoleert. Als u er één met de hand bouwt, betekent dit dat u meerdere van deze percentagecontrolepunten tegelijk in uw hoofd moet houden voor verschillende eigendommen. Deze generator verandert die tijdlijn in iets dat u daadwerkelijk kunt zien en slepen: één horizontale rijstrook per eigendom, met een stopmarkering bij elk controlepunt.

Het middelpunt is de scrub-afspeelkop. Sleep het naar een punt tussen 0% en 100% en het voorbeeldvenster springt naar de exacte gecombineerde status op dat moment - niet het dichtstbijzijnde keyframe, maar een echte lineair geïnterpoleerde waarde berekend tussen de twee stops rondom de afspeelkop op elk actief nummer. Numerieke eigenschappen zoals positie, rotatie en schaal worden geïnterpoleerd als gewone getallen; achtergrondkleur interpoleert elk rood, groen en blauw kanaal onafhankelijk, waardoor een kleurspoor vloeiend door tussenliggende tinten vervaagt in plaats van te springen tussen de kleuren die u feitelijk instelt.

Meerdere sporen worden automatisch gecombineerd tot één samenhangende animatie: elke op transformatie gebaseerde eigenschap (verplaatsen, roteren, schalen) wordt samengevoegd in een enkele transformatiedeclaratie bij elk sleutelframepercentage, terwijl de dekking en achtergrondkleur op hun eigen lijnen blijven, precies zoals echte handgeschreven CSS eruit zou zien. Percentages waarbij een bepaald nummer geen expliciete stop heeft, worden met opzet eenvoudig weggelaten uit de declaraties van die eigenschap - de eigen keyframe-interpolatie van de browser vult het gat tussen de stops die er wel zijn, op dezelfde manier als dat zou gebeuren voor elke @keyframes-regel die u met de hand typt.

Vijf presets — bounce, shake, pulse, fade en slide-in — laden met één klik een complete, kant-en-klare tijdlijn (inclusief een verstandige duur, timingfunctie en herhalingstelling). Druk op elk gewenst moment op Afspelen om de echte CSS-animatie op het voorbeeldelement te zien draaien, direct gegenereerd via een dynamisch geïnjecteerde stylesheet, en kopieer vervolgens het volledige @keyframes-blok plus de .animated-element { animatie: ... } afkorting rechtstreeks naar uw eigen project. Zoals elke tool op deze site draait het allemaal lokaal in de browser en wordt er nooit iets geüpload.