Czym jest krzywa sześcienna (cubic-bezier)?

Krzywa zdefiniowana przez 4 wartości kontrolne — używana przez przejścia i animacje CSS do kontrolowania tempa zmian w czasie. Domyślne 'ease' przeglądarki to cubic-bezier(0.25, 0.1, 0.25, 1).

Czym jest 'overshoot' (przeregulowanie)?

Gdy krzywa animacji przekracza 0 lub 1 (współrzędne y punktów kontrolnych 1), animacja 'odbija się' poza swoje punkty końcowe. Przydatne dla zabawnych interfejsów użytkownika.

Czy dostępne są presety?

Tak — typowe ustawienia (linear, ease, ease-in, ease-out, ease-in-out) oraz kilka popularnych niestandardowych krzywych.

Czy edytor jest darmowy?

Tak — całkowicie darmowy, bez rejestracji.

Kolor i Projekt

Edytor krzywych Béziera

Darmowy edytor krzywych Béziera. Projektuj krzywe łagodzące CSS wizualnie za pomocą uchwytów do przeciągania, predefiniowanych ustawień i podglądu animacji na żywo. Kopiuj CSS do przejść i animacji.

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);

Notka redakcyjna

Understanding · Time, but with feeling.

Ten szczegółowy rozdział jest obecnie dostępny tylko w języku angielskim. Narzędzie konwersji powyżej działa w Twoim języku; długi artykuł objaśniający nie został jeszcze przetłumaczony.

Często zadawane pytania

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.

Ludzie wyszukują również

Powiązane narzędzia

More in this room.

Zobacz wszystkie w Kolor i Projekt