Wat is een cubic-bezier?

Een curve gedefinieerd door 4 controlewaarden — gebruikt door CSS-transities en animaties om de veranderingssnelheid over tijd te regelen. De 'ease' van de browser is cubic-bezier(0.25, 0.1, 0.25, 1).

Wanneer de easing-curve 0 of 1 overschrijdt (controle y-waarden 1), springt de animatie 'voorbij' zijn eindpunten. Handig voor speelse UI's.

Zijn er voorinstellingen beschikbaar?

Ja — veelvoorkomende voorinstellingen (linear, ease, ease-in, ease-out, ease-in-out) plus een paar populaire aangepaste curves.

Ja — volledig gratis, geen aanmelding vereist.

Kleur & Ontwerp

Cubic Bezier Editor

Gratis cubic-bezier editor. Ontwerp CSS easing-curves visueel met sleepgrepen, voorinstellingen en live animatiepreview. Kopieer CSS voor transities en animaties.

Runs in your browser

Cubic-bezier editor

x10.25

y10.1

x20.25

y21

CSS

transition-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);

Redactionele opmerking

Understanding · Time, but with feeling.

Dit uitgebreide hoofdstuk is momenteel alleen in het Engels beschikbaar. De conversietool hierboven werkt in jouw taal; de lange uitleg is nog niet vertaald.

Veelgestelde vragen

Quick answers.

›What's a cubic-bezier?

A curve defined by 4 control values — used by CSS transitions and animations to control the rate of change over time. The browser's 'ease' is cubic-bezier(0.25, 0.1, 0.25, 1).

›What's overshoot?

When the easing curve exceeds 0 or 1 (control y-values < 0 or > 1), the animation 'bounces' past its endpoints. Useful for playful UIs.

›Are presets available?

Yes — common presets (linear, ease, ease-in, ease-out, ease-in-out) plus a few popular custom curves.

›Is the editor free?

Yes — fully free, no signup.

Mensen zoeken ook naar

Gerelateerde tools

More in this room.

Bekijk alles in Kleur & Ontwerp