Punkty kontrolne

Point P1 (x1, y1)

0 0.25 1
0 0.1 1

Point P2 (x2, y2)

0 0.25 1
0 1 1

Popularne ustawienia krzywych dynamiki

Dane wyjściowe CSS

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

Preview

Duration: 500ms

Wizualizacja krzywej Beziera

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

Dokumentacja Cubic Beziera

Co to jest sześcienna krzywa Beziera?

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.

Składnia CSS

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

Typowe przypadki użycia

  • Animowane przejścia:Twórz płynne animacje dla elementów zmieniających właściwości.
  • Efekty przewijania:Kontroluj szybkość animacji przewijania.
  • Elementy interaktywne:Określ, w jaki sposób elementy reagują na interakcje użytkownika, takie jak najechanie kursorem lub kliknięcie.
  • Projektowanie ruchu:Twórz złożone sekwencje ruchu dla elementów interfejsu.

Popularne funkcje krzywych dynamiki

Ease (default)

Zaczyna się powoli, szybko przyspiesza, a następnie ponownie zwalnia.

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

Linear

Stała prędkość od początku do końca.

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

Ease-in

Zaczyna się powoli, potem przyspiesza.

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

Ease-out

Zaczyna się szybko, a potem zwalnia.

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

Wskazówki dotyczące tworzenia krzywych niestandardowych

  1. Zachowaj wartości x w zakresie od 0 do 1:Wartości spoza tego zakresu mogą powodować nieoczekiwane zachowanie.
  2. Wizualizacja krzywej:Użyj interaktywnego wykresu, aby zrozumieć, jak zmiany wpływają na animację.
  3. Test z rzeczywistymi elementami:Zawsze wyświetlaj podgląd krzywej z rzeczywistymi komponentami interfejsu użytkownika, aby upewnić się, że jest odpowiednia.
  4. Zapisz ustawienia wstępne:Dodaj do zakładek przydatne krzywe dla przyszłych projektów.

Related Tools

Upiększacz CSS

Formatuj i upiększaj swój kod CSS z profesjonalną precyzją

Generator przejść CSS3

Płynne przejście krycia

Minifikator CSS

Kompresuj i optymalizuj swój kod CSS z profesjonalną precyzją

Licz słowa, znaki i nie tylko

Uzyskaj szczegółowe statystyki dotyczące swojego tekstu za pomocą naszego dokładnego narzędzia do liczenia słów.

Walidator JSON

Weryfikuj, formatuj i debuguj dane JSON z precyzją. Otrzymuj natychmiastowe informacje zwrotne na temat błędów składniowych i problemów z formatowaniem.

Kalkulator podatku od towarów i usług

Oblicz podatek od towarów i usług (GST) za pomocą naszego łatwego w użyciu kalkulatora GST.