CSS Easing Generator
Gratis online CSS easing generator. Sleep de cubic-bezier-controlepunten op een interactieve curve, kies uit 18 presets, bekijk een herhalende bal-animatie en kopieer de timingfunctie direct.
Wat is een easing-functie in CSS?
Een easing-functie regelt in welk tempo een animatie of overgang in de tijd vordert. Een element hoeft niet met constante snelheid te bewegen: het kan langzaam starten, versnellen, het doel voorbij schieten en settelen. In CSS stel je het in met transition-timing-function of animation-timing-function.
Wat betekenen de vier getallen in cubic-bezier()?
cubic-bezier(x1, y1, x2, y2) definieert een curve via twee controlepunten. Het eerste punt vormt het begin van de beweging, het tweede het einde. X staat voor tijd op een schaal van 0 tot 1, Y voor voortgang: 0 is de startwaarde, 1 de eindwaarde.
Waarom mag Y buiten 0 tot 1 terwijl X dat niet mag?
X wordt op echte tijd afgebeeld; een waarde onder 0 of boven 1 zou de causaliteit breken en is volgens de specificatie verboden. Y is vrij: boven 1 schiet je voorbij het doel, onder 0 ga je eerst achteruit — zo krijgen de Back-presets hun stuitergevoel.
Wat is het verschil tussen ease, ease-in en ease-out?
ease is de browserstandaard met zachte start en zachte landing; ease-in start traag en eindigt snel; ease-out start snel en vertraagt; ease-in-out combineert beide. De generator bevat daarnaast sine-, quad-, cubic-, quart-, expo-, back- en material-presets — 18 in totaal.
Hoe werkt de balvoorbeeld?
Twee ballen lopen de door jou ingestelde duur in een lus. De bovenste bal beweegt altijd met een lineaire functie als referentie, de onderste volgt jouw curve. De groeiende en krimpende afstand tussen hen toont precies wat jouw easing verandert.
Waar plak ik de gegenereerde waarde?
Gebruik het als waarde voor transition-timing-function of animation-timing-function, bijvoorbeeld transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);. De tool levert de kale functie cubic-bezier(...) die in elke regel past.
Beïnvloedt de easing-functie de animatieprestaties?
De timingfunctie zelf kost niets: ze herbeeldt alleen voortgang over tijd. De prestaties hangen af van welke eigenschappen je animeert: transform en opacity zijn GPU-vriendelijk, terwijl layouteigenschappen zoals width of top ongeacht de easing dure reflows veroorzaken.
Kan ik een echte bounce- of elastischeffect maken?
Eén cubic-bezier kan een keer overschieten, maar niet de meervoudige stuitingen van een echte bounce of elastische easing produceren. Daarvoor keten je meerdere keyframes in @keyframes of gebruik je de Web Animations API; het enkele soepele overschieten is precies wat cubic-bezier goed kan en wat deze tool biedt.
Wordt wat ik hier doe geüpload?
Nee. De curve wordt op een lokaal canvas getekend en de voorbeeldanimatie draait volledig in je browser. Er wordt niets naar een server gestuurd, dus de generator werkt na het laden ook offline.
Hoe CSS Easing Generator te gebruiken
Boetseer CSS-easingcurves visueel in plaats van getallen te gokken. Sleep de controlepunten, vergelijk je beweging met een lineaire referentie en kopieer de kant-en-klare cubic-bezier in één klik. Alles draait lokaal in je browser.
- Kies een van de 18 standaarden als startpunt, zoals Ease Out, Expo Out of Back Out.
- Sleep de twee handvatten op de curve: de X-as is tijd en moet tussen 0 en 1 blijven, de Y-as is voortgang en mag overtrekken.
- Stem de exacte P1- en P2-coördinaten fijn af met de getalvelden als je precisie nodig hebt.
- Zet de duurschuif en kijk naar de twee lopende balletjes — het holle is altijd lineair, het volle gebruikt jouw curve.
- Kopieer de gegenereerde cubic-bezier-waarde naar transition-timing-function of animation-timing-function.
Duw een Y-handvat boven 1 voor een zelfzeker overtrek, zoals cubic-bezier(0.34, 1.56, 0.64, 1) — zo voelen knoppen en kaarten veerkrachtig aan zonder enige keyframes.
Gerelateerde tools
- CSS-gradiëntgenerator Maak visueel verbluffende CSS-gradiënten. Genereer lineaire, radiale en conische gradiënten met meerdere kleurstops, hoeken en posities. Kopieer direct productierijpe CSS-code.
- CSS Loader Generator Gratis CSS-loader-generator: tien laad-spinners in pure CSS met live regeling van grootte, snelheid, dikte en kleur, en kant-en-klare HTML en CSS om te kopiëren.
- Border Radius Generator Gratis online border-radius generator. Sleep 8 handvatten of kies een blob-voorinstelling om organische CSS-vormen te maken en de code direct te kopiëren.
- Kleurconverteerder Gratis online kleurconverteerder. Converteer HEX, RGB, HSL, HSV formaten direct met visuele kiezer. 100% privé, werkt in uw browser.
- CSS Text-shadow Generator Gratis online text-shadow generator. Stapel meerdere schaduwlagen met offset, vervaging, kleur en dekking, probeer presets als Neon, 3D of Retro en kopieer de CSS direct.
- CSS Clip-path Generator Gratis online CSS clip-path generator. Ontwerp polygon-, circle-, ellipse- en inset-vormen met sleepbare punten, live voorbeeld en CSS-code kopiëren met één klik.
- CSS Beautifier Formatteer en verfraai CSS-code direct. Converteer gecomprimeerde CSS naar leesbare code met aanpasbare opties.
- CSS Minifier Gratis online CSS minifier. Comprimeer en optimaliseer CSS-code direct door spaties, opmerkingen en onnodige tekens te verwijderen. Verklein de bestandsgrootte voor snellere webprestaties.