Generator easing CSS
Darmowy online generator easing CSS. Przeciągaj punkty kontrolne cubic-bezier na interaktywnej krzywej, wybierz jeden z 18 presetów, oglądaj zapętloną animację kulki i natychmiast kopiuj funkcję czasu.
Czym jest funkcja easing w CSS?
Funkcja easing steruje tempem, z jakim animacja lub przejście postępuje w czasie. Element nie musi poruszać się ze stałą prędkością: może wystartować wolno, przyspieszyć, przestrzelić cel i się ustabilizować. W CSS ustawia się ją właściwością transition-timing-function lub animation-timing-function.
Co oznaczają cztery liczby w cubic-bezier()?
cubic-bezier(x1, y1, x2, y2) definiuje krzywą za pomocą dwóch punktów kontrolnych. Pierwszy kształtuje początek ruchu, drugi zakończenie. X to czas na skali od 0 do 1, a Y to postęp: 0 to wartość początkowa, 1 — końcowa.
Dlaczego Y może wyjść poza 0–1, a X nie?
X jest mapowane na rzeczywisty czas, więc wartość poniżej 0 lub powyżej 1 złamałaby przyczynowość i specyfikacja tego zabrania. Y jest wolne: powyżej 1 przestrzeliwuje cel, poniżej 0 najpierw się cofa — tak presety Back budują wrażenie odbicia.
Jaka jest różnica między ease, ease-in i ease-out?
ease to domyślna wartość przeglądarki z łagodnym startem i miękkim lądowaniem; ease-in startuje wolno i kończy szybko; ease-out startuje szybko i zwalnia; ease-in-out łączy oba. Generator zawiera ponadto presety sine, quad, cubic, quart, expo, back i material — łącznie 18.
Jak działa podgląd z kulką?
Dwie kulki krążą w pętli przez ustawiony czas. Górna zawsze porusza się funkcją liniową jako odniesienie, dolna podąża za Twoją krzywą. Zmieniająca się przerwa między nimi pokazuje dokładnie, co zmienia Twój easing.
Gdzie wkleić wygenerowaną wartość?
Użyj jej jako wartości transition-timing-function lub animation-timing-function, np. transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);. Narzędzie zwraca gołą funkcję cubic-bezier(...), gotową do każdej reguły.
Czy funkcja easing wpływa na wydajność animacji?
Sama funkcja czasu nic nie kosztuje — tylko remapuje postęp w czasie. Wydajność zależy od tego, które właściwości animujesz: transform i opacity są przyjazne GPU, a animowanie właściwości układu jak width czy top wywołuje kosztowne reflow niezależnie od easing.
Czy mogę stworzyć prawdziwy efekt odbicia lub sprężystości?
Pojedynczy cubic-bezier może raz przestrzelić cel, ale nie wygeneruje wielokrotnych odbić prawdziwego bounce czy sprężystego easing. W tym celu łącz kilka klatek kluczowych w @keyframes albo użyj Web Animations API; pojedyncze miękkie przestrzelenie to dokładnie to, co cubic-bezier robi świetnie i co oferuje to narzędzie.
Czy to, co robię tutaj, jest wysyłane na serwer?
Nie. Krzywa rysowana jest na lokalnym canvasie, a animacja podglądu działa w całości w Twojej przeglądarce. Nic nie jest przesyłane na serwer, więc po wczytaniu strony generator działa też offline.
Jak korzystać z Generator easing CSS
Rzeźb krzywe easing w CSS wizualnie, zamiast zgadywać liczby. Przeciągaj punkty kontrolne, porównuj swój ruch z liniowym wzorcem i kopiuj gotowe cubic-bezier jednym kliknięciem. Wszystko działa lokalnie w Twojej przeglądarce.
- Wybierz jeden z 18 presetów jako punkt wyjścia, na przykład Ease Out, Expo Out lub Back Out.
- Przeciągaj dwa uchwyty na krzywej: oś X to czas i musi pozostać między 0 a 1, oś Y to postęp i może przekraczać.
- Dostrój dokładne współrzędne P1 i P2 polami liczbowymi, jeśli potrzebujesz precyzji.
- Ustaw suwak czasu i obserwuj dwie pętle piłki — pusta jest zawsze liniowa, pełna używa Twojej krzywej.
- Skopiuj wygenerowaną wartość cubic-bezier do transition-timing-function lub animation-timing-function.
Wypchnij uchwyt Y ponad 1 dla pewnego przetaktowania, na przykład cubic-bezier(0.34, 1.56, 0.64, 1) — sprawia, że przyciski i karty wydają się sprężyste bez żadnych klatek kluczowych.
Powiązane narzędzia
- Generator gradientów CSS Twórz oszałamiające gradienty CSS wizualnie. Generuj gradienty liniowe, radialne i stożkowe z wieloma punktami kolorów, kątami i pozycjami. Natychmiast kopiuj gotowy do produkcji kod CSS.
- Generator Loaderów CSS Darmowy generator loaderów CSS: dziesięć spinnerów ładowania w czystym CSS z żywą regulacją rozmiaru, prędkości, grubości i koloru oraz gotowymi do wklejenia HTML i CSS.
- Generator border-radius Darmowy kreatywny generator border-radius online. Przeciągnij 8 uchwytów lub wybierz kształt blob, aby tworzyć organiczne formy CSS i kopiować kod od razu.
- Konwerter kolorów Darmowy konwerter kolorów online. Natychmiastowa konwersja formatów HEX, RGB, HSL, HSV z wizualnym wyborem koloru. 100% prywatne, działa w przeglądarce.
- Generator text-shadow CSS Darmowy online generator text-shadow CSS. Nakładaj wiele warstw cienia z przesunięciem, rozmyciem, kolorem i nieprzezroczystością, wypróbuj presety Neon, 3D, Retro i natychmiast kopiuj CSS.
- Generator CSS clip-path Darmowy online generator CSS clip-path. Projektuj kształty polygon, circle, ellipse i inset z przeciąganymi punktami, podglądem na żywo i kopiowaniem kodu CSS jednym kliknięciem.
- Upiększacz CSS Formatuj i upiększaj kod CSS natychmiast. Konwertuj zminifikowany CSS na czytelny kod z konfigurowalnymi opcjami.
- Minifikator CSS Darmowy minifikator CSS online. Natychmiast kompresuj i optymalizuj kod CSS, usuwając białe znaki, komentarze i niepotrzebne znaki. Zmniejsz rozmiar pliku dla szybszej wydajności sieci.