Controlepunten

Point P1 (x1, y1)

0 0.25 1
0 0.1 1

Point P2 (x2, y2)

0 0.25 1
0 1 1

Populaire versoepelingsvoorinstellingen

CSS-uitvoer

cubic-bezier(0.25, 0.1, 0.25, 1)

Preview

Duration: 500ms

Visualisatie van de Bezier-curve

time (1) easing (1) easing (0) P0 (0, 1) P1 (0.25, 0.1) P2 (0.25, 1) P3 (1, 1)

x1

0.25

y1

0.1

x2

0.25

y2

1

Cubic Bezier-documentatie

Wat is een kubieke Bezier-curve?

A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.

CSS-syntaxis

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

Veelvoorkomende gebruiksscenario's

  • Geanimeerde overgangen:Maak vloeiende animaties voor elementen die eigenschappen wijzigen.
  • Scroll effecten:Bepaal de snelheid van scrollanimaties.
  • Interactieve elementen:Definieer hoe elementen reageren op gebruikersinteracties zoals zweven of klikken.
  • Motie ontwerp:Maak complexe bewegingssequenties voor UI-elementen.

Populaire versoepelingsfuncties

Ease (default)

Begint langzaam, accelereert snel en vertraagt dan weer.

cubic-bezier(0.25, 0.1, 0.25, 1)

Linear

Constante snelheid van begin tot eind.

cubic-bezier(0, 0, 1, 1)

Ease-in

Begint langzaam en versnelt dan.

cubic-bezier(0.42, 0, 1, 1)

Ease-out

Start snel en vertraagt dan.

cubic-bezier(0, 0, 0.58, 1)

Tips voor het maken van aangepaste curven

  1. Houd x-waarden tussen 0 en 1:Waarden buiten dit bereik kunnen onverwacht gedrag veroorzaken.
  2. Visualiseer de curve:Gebruik de interactieve grafiek om inzicht te krijgen in de invloed van wijzigingen op de animatie.
  3. Test met echte elementen:Bekijk altijd een voorbeeld van uw curve met de werkelijke UI-componenten om er zeker van te zijn dat deze goed aanvoelt.
  4. Voorinstellingen opslaan:Maak een bladwijzer van nuttige curves voor toekomstige projecten.

Related Tools

CSS3 Overgang Generator

Vloeiende overgang van dekking

Minder naar CSS Converter

Transformeer uw Less-code in CSS. Snel, gemakkelijk en veilig.

Sass naar CSS Converter

Transformeer uw Sass-code in CSS. Snel, gemakkelijk en veilig.

Lengte Converter

Converteer met gemak en precisie tussen verschillende lengte-eenheden. Perfect voor dagelijks gebruik en professionele toepassingen.

CMYK naar HSV

Converteer CMYK-kleurwaarden naar HSV-kleurmodel voor digitale toepassingen

CSS Driehoek Generator

Pas uw driehoek aan met de onderstaande opties en ontvang direct de gegenereerde CSS-code.