⭐ 0
🔍
Tekst Afbeelding PDF & Documenten Audio Muziek Elektronica Tijd Hulpprogramma's Validators Esoterie Spellen

CSS Keyframe-animatie-generator

Bouw echte @keyframes-animaties op een multi-track-tijdlijn – per track stops voor transform, opacity en background-color – met een versleepbare afspeelkop die de exacte geïnterpoleerde tussenstand van de animatie toont.

🔒 Wordt volledig in uw browser verwerkt. Niets wat u hier invoert, wordt ooit geüpload.

Klik ergens in een lijn om daar een stop toe te voegen. Sleep een stop om hem te verplaatsen, of bewerk eronder het %- en waardeveld. Dubbelklik op een stop om hem te verwijderen (minimaal 2 per track).

Verwerken... 0%

Resultaat

Een CSS-@keyframes-regel is in feite een kleine tijdlijn: een reeks procentuele checkpoints die elk aangeven hoe een eigenschap er op dat moment uit moet zien, terwijl de browser alles daartussen interpoleert. Wanneer u er handmatig één bouwt, moet u meerdere van deze procentuele checkpoints tegelijk onthouden voor verschillende eigenschappen – deze generator maakt die tijdlijn visueel en versleepbaar: één horizontale lijn per eigenschap, met een markering bij elk checkpoint.

De kern is de scrub-afspeelkop. Sleep hem naar een willekeurig punt tussen 0% en 100% en het voorbeeldvenster springt naar de exacte gecombineerde toestand op dat moment – niet het dichtstbijzijnde keyframe, maar een werkelijk lineair geïnterpoleerde waarde tussen de twee stops die de afspeelkop op iedere actieve track omringen. Numerieke eigenschappen zoals positie, rotatie en schaal interpoleren als gewone getallen; background-color interpoleert elk rood-, groen- en blauwkanaal afzonderlijk, waardoor een kleurtrack vloeiend door tussentinten loopt in plaats van te springen tussen de daadwerkelijk ingestelde kleuren.

Meerdere tracks combineren zichzelf automatisch tot één samenhangende animatie: elke op transform gebaseerde eigenschap (verplaatsen, roteren, schalen) voegt zich bij elk keyframe-percentage samen in één transform-declaratie, terwijl opacity en background-color op hun eigen regels blijven, precies zoals echte handgeschreven CSS eruit zou zien. Percentages waarop een track geen expliciete stop kent, worden met opzet weggelaten uit de declaraties van die eigenschap – de browsers interpolatie tussen keyframes vult het gat op tussen de aanwezige stops, net zoals voor elke @keyframes-regel die u met de hand typt.

Vijf presets – stuiter, schud, pulseer, fade en schuif-in – laden een complete, kant-en-klare tijdlijn (inclusief een zinnige duur, timing-functie en herhaling) met één klik. Druk op elk moment op Afspelen om de echte CSS-animatie op het voorbeeldelement te zien, dynamisch gegenereerd via een ingevoegde stylesheet, en kopieer vervolgens het volledige @keyframes-blok plus de .animated-element { animation: ... } shorthand rechtstreeks naar uw eigen project. Zoals iedere tool op deze site draait alles lokaal in de browser en wordt er nooit iets geüpload.

Geniet je van dit hulpmiddel? Denkt u dat dit product nuttig is? Zie je er potentieel in en wil je het ondersteunen?

🛡️
Uitgevoerd in browser

Uw bestanden en invoer verlaten dit apparaat nooit. Verwerking verloopt volledig offline. 100% veilig.

Geaccepteerde formaten & regels

  • Multi-track-tijdlijn voor transform (translateX, translateY, rotate, scale), opacity en background-color, elk met eigen versleepbare stops.
  • Echte lineaire interpolatie – numerieke waarden en per kleurkanaal RGB voor kleuren – bepaalt de scrubvoorbeeldweergave tussen twee stops op een track.
  • Een afspeelknop past de daadwerkelijk gegenereerde @keyframes-css toe op de voorbeeldweergave via een dynamisch ingevoegde stylesheet, plus een kopieerbare uitvoer van het volledige @keyframes-blok en de animation-shorthand.

Belangrijkste voordelen

✓ De versleepbare afspeelkop toont echte geïnterpoleerde tussenstanden van de animatie – geen sprong tussen keyframes – precies zoals de browser ze daadwerkelijk weergeeft.
✓ Elke eigenschap heeft zijn eigen track met eigen stops, zodat een stuiter, een kleurverschuiving en een fade tegelijk op hetzelfde element kunnen draaien zonder elkaar in de weg te zitten.
✓ Vijf kant-en-klare presets (stuiter, schud, pulseer, fade, schuif-in) geven u met één klik een werkend startpunt, en daarna blijft elke stop volledig aanpasbaar.

Toepassingen

  • • Sleep de scrub-playhead naar elk punt in een bounce- of pulse-animatie om de exacte, in realtime geïnterpoleerde mid-animatiestatus te zien voordat je de CSS uitrolt.
  • • Combineer een translateX-spoor en een opacity-spoor om een echte slide-in-and-fade-intro-animatie te bouwen en kopieer vervolgens de volledige @keyframes + animation-shorthand.
  • • Voeg een background-color-spoor naast een scale-spoor toe om de kleur en grootte van een knop samen te animeren, en zie live hoe de RGB-kanalen in elkaar overlopen terwijl je scrubt.