Editor cubic-bezier CSS

Cum folosești editorul cubic-bezier

1. Trage cele două mânere de pe grafic. P1 (primul punct de control) modelează începutul mișcării, P2 sfârșitul. Timpul curge de la stânga la dreapta, iar progresul de jos în sus.
2. Sau scrie o valoare în Valoare cubic-bezier(): un cubic-bezier(0.4, 0, 0.2, 1) complet, patru numere sau un cuvânt-cheie precum ease-in-out. Câmpurile x1, y1, x2 și y2 editează câte o coordonată.
3. Pornește din meniul Presetări (cuvinte-cheie CSS, familiile de la sine la back și curbele Material Design) sau din butoanele cu cuvinte-cheie. Când curba ta corespunde unei presetări, numele ei apare lângă butoane.
4. Urmărește Previzualizarea animației: punctul de pe Curba ta și cel de pe linear parcurg aceeași distanță în aceeași Durată. Folosește Pauză/Redă și Repornește ca să le compari.
5. Copiază rezultatul din Funcție de temporizare CSS sau copiază Aproximare linear() și alege numărul de Segmente.

Tastatură: selectează un mâner și folosește tastele săgeți ca să îl muți cu 0,01 sau cu 0,1 împreună cu Shift.

Dacă sistemul tău este setat pe mișcare redusă, animația pornește în pauză. Apasă Redă dacă vrei să o rulezi oricum.

Ce înseamnă cubic-bezier()

O funcție de easing CSS asociază timpul scurs al unei tranziții (de la 0 la 1) cu progresul ei (de la 0 la 1). cubic-bezier(x1, y1, x2, y2) descrie această corespondență printr-o curbă Bézier cubică care pornește din (0, 0), se termină în (1, 1) și este trasă de două puncte de control, P1 = (x1, y1) și P2 = (x2, y2).

• Valorile x sunt timpi și trebuie să rămână între 0 și 1, altfel funcția nu ar fi o curbă de temporizare validă. Editorul le ține în interval.
• Valorile y sunt progres și pot coborî sub 0 sau urca peste 1. Un y peste 1 face animația să depășească ținta și să revină, ca la curbele Back; sub 0, mișcarea merge mai întâi înapoi.
• O pantă abruptă înseamnă mișcare rapidă, o pantă plată mișcare lentă. ease-out pornește rapid și se termină lent, ceea ce pare natural pentru elementele care intră pe ecran. ease-in face invers și se potrivește elementelor care ies.

Cuvintele-cheie CSS sunt prescurtări: ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1) și linear = (0, 0, 1, 1).

Aproximarea linear()

Funcția mai nouă linear() enumeră valori de progres la momente egal distanțate, de exemplu linear(0, 0.25, 0.5, 0.75, 1), și le unește cu linii drepte. Instrumentul eșantionează curba ta (rezolvă curba Bézier pentru fiecare pas de timp) și scrie valorile cu trei zecimale. Cu 20 până la 40 de segmente, rezultatul este vizual identic cu curba. Adevăratul avantaj al lui linear() este pentru curbe pe care o curbă Bézier nu le poate desena, precum reveniri elastice și arcuri, dar îți permite și să împarți o singură sintaxă. Funcționează în Chrome și Edge 113+, Firefox 112+ și Safari 17.2+, deci păstrează valoarea cubic-bezier() ca rezervă.