Generator CSS Cubic-Bezier

Ce este acest instrument?

cubic-bezier() este o funcție de timing CSS care controlează modul în care o valoare animată sau tranziționată accelerează și decelerează în timp, în loc să se miște la un ritm constant. Este definită de două puncte de control — (x1, y1) și (x2, y2) — care îndoaie o curbă între un punct fix de start (0,0) și un punct final (1,1). Valorile x trebuie să rămână între 0 și 1, dar valorile y pot depăși acel interval pentru a crea efecte de depășire sau balans.

Scris manual, reglarea a patru numere zecimale pentru a obține o senzație care nu este nici prea bruscă, nici prea moale necesită mult încercare și eroare. Acest instrument înlocuiește acel ghicit cu manipulare directă: trage un slider, urmărește curba îndoindu-se și bila de previzualizare mișcându-se în consecință, și copiază CSS-ul odată ce mișcarea se simte bine.

Sursă: CSS Easing Functions Level 1, W3C — specificația care definește cubic-bezier() și cele cinci cuvinte cheie numite pe care se bazează presetările acestui instrument.

De ce să-l folosești?

• Un grafic SVG live arată exact cum se îndoaie curba ta între punctele fixe de start și final, cu ambele puncte de control și mânerele lor desenate pentru claritate.
• Butonul Play animă un element de previzualizare de-a lungul unei piste, folosind curba ta exactă, astfel încât să simți mișcarea, nu doar să vezi un grafic static.
• Presetări dintr-un clic pentru cele cinci funcții de easing standard numite — ease, ease-in, ease-out, ease-in-out și linear — așa cum sunt documentate în specificația CSS Easing Functions.
• Valorile y pot merge sub 0 sau peste 1, permițându-ți să construiești efecte de easing cu depășire/balans pe care cuvintele cheie numite nu le pot produce.
• Generează CSS transition-timing-function gata de lipit — aceeași valoare funcționează și pentru animation-timing-function.
• Rulează complet în browserul tău — nimic din ce configurezi nu este încărcat nicăieri. Gratuit, fără înregistrare.

Cum se folosește

1. Trage sliderele x1/y1 pentru a seta primul punct de control, care formează modul în care începe animația.
2. Trage sliderele x2/y2 pentru a seta al doilea punct de control, care formează modul în care se termină animația.
3. Urmărește curba neagră pe grafic — o curbă care se umflă deasupra diagonalei la început înseamnă că mișcarea începe rapid, una care rămâne sub ea înseamnă că mișcarea începe lent.
4. Apasă Play pentru a vedea un element de previzualizare mișcându-se de-a lungul pistei, folosind curba ta ca transition-timing-function.
5. Încearcă o presetare (ease, ease-in, ease-out, ease-in-out, linear) ca punct de plecare, apoi ajustează sliderele de acolo.
6. Copiază CSS-ul generat și lipește-l într-o regulă de tranziție sau animație.

Exemplu

Intrare

x1: 0.25, y1: 0.1, x2: 0.25, y2: 1

Rezultat

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Acesta este cuvântul cheie CSS standard ease scris explicit ca puncte de control — un start rapid, accelerare bruscă, apoi o încetinire treptată spre final.

De ce valorile y pot depăși 0–1

Spre deosebire de axa x, care reprezintă timpul și trebuie să meargă de la 0 la 1, axa y reprezintă progresul valorii animate și nu are o astfel de limită. Setarea lui y1 sub 0 sau y2 peste 1 face ca curba să coboare sub valoarea de start sau să depășească valoarea finală înainte de a se stabiliza — baza efectelor de depășire și anticipare folosite la apăsări de butoane, apariții de modale și micro-interacțiuni jucăușe de interfață. Niciunul dintre cele cinci cuvinte cheie numite (ease, ease-in, ease-out, ease-in-out, linear) nu poate produce asta; ai nevoie de un cubic-bezier() personalizat pentru asta.

transition-timing-function vs. animation-timing-function

Valoarea cubic-bezier() generată de acest instrument funcționează identic în ambele proprietăți. Folosește transition-timing-function când mișcarea este declanșată de o schimbare de stare (precum un hover sau o comutare de clasă), și animation-timing-function într-o regulă de animație bazată pe @keyframes, când ai nevoie de aceeași senzație de easing aplicată automat sau în buclă.

Modele comune de easing

• Feedback rapid de interfață (butoane, comutatoare): păstrează punctele de control aproape de diagonală cu o ușoară tendință spre ease-out, de exemplu cubic-bezier(0.4, 0, 0.2, 1).
• Curba standard Material Design: cubic-bezier(0.4, 0, 0.2, 1) — start rapid, final blând, folosită pe scară largă pentru tranziții de panouri și carduri.
• Balans/depășire: împinge y2 peste 1, de exemplu cubic-bezier(0.34, 1.56, 0.64, 1), pentru o senzație jucăușă de apariție.
• Anticipare înainte de mișcare: împinge y1 sub 0, astfel încât elementul se retrage ușor înainte de a se mișca înainte.
• Ease-in-out lin pentru animații în buclă: păstrează curba aproape simetrică în jurul centrului.

Combinarea cu alte instrumente CSS

O curbă de easing rareori stă singură — de obicei este aplicată unui element care are nevoie și de umbre, colțuri rotunjite sau gradienți definiți. Generează stilizarea vizuală cu celelalte instrumente CSS de mai jos, apoi adaugă funcția de timing din acest instrument la aceeași regulă sau declarație de tranziție/animație.

→ Generator Box Shadow · Generator Border Radius

Întrebări frecvente