Cubic Bezier Generator

Ontwerp CSS cubic-bezier timing-functies met een interactieve curve-editor, animatiepreview en preset easings.

Curve-editor

Presets

Controlepunten

Animatiepreview

Verplaatsen

Schaal

Dekking

CSS Uitvoer

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

Ctrl+Enter uitvoerenCtrl+Shift+C kopiëren

Meer informatie

Kubische Bezier-generator: CSS-animatie-easing visueel gemaakt

Kubische Bezier-curven bepalen hoe CSS-animaties aanvoelen. Leer hoe controlepunten beweging vormen.

Wat zijn kubische Bezier-curven?

Een kubische Bezier-curve is een wiskundige functie die in CSS wordt gebruikt om de timing van animaties en transities te bepalen. Geschreven als cubic-bezier(x1, y1, x2, y2), beschrijft het hoe een animatie van begin tot eind verloopt door tijd te mappen op voortgang langs een vloeiende curve gedefinieerd door vier controlepunten.

5 min lezenLees de volledige gids

Gerelateerde tools

Wist u dat?

Wachtwoordgenerator

Beveiliging

Genereer sterke, willekeurige wachtwoorden met aanpasbare lengte, tekensets en bulkgeneratie.

Wachtwoordgenerator

UUID-generator

Willekeurig getal generator