Editor de cubic-bezier CSS

Com utilitzar l’editor de cubic-bezier

1. Arrossega els dos tiradors del gràfic. P1 (el primer punt de control) dona forma a l’inici del moviment, i P2 al final. El temps va d’esquerra a dreta i el progrés de baix a dalt.
2. O bé escriu un valor a Valor de cubic-bezier(): un cubic-bezier(0.4, 0, 0.2, 1) complet, quatre nombres, o una paraula clau com ease-in-out. Els camps x1, y1, x2 i y2 editen una coordenada cada vegada.
3. Comença pel menú Predefinits (paraules clau CSS, les famílies de sine a back i les corbes de Material Design) o pels botons de paraules clau. Quan la teva corba coincideix amb un predefinit, el seu nom es mostra al costat dels botons.
4. Observa la Previsualització de l’animació: el punt de La teva corba i el de linear recorren la mateixa distància amb la mateixa Durada. Fes servir Atura/Reprodueix i Reinicia per comparar-los.
5. Copia el resultat de Funció de temps CSS, o copia l’Aproximació amb linear() i tria-ne el nombre de Segments.

Teclat: posa el focus en un tirador i fes servir les tecles de fletxa per moure’l 0,01, o 0,1 amb Maj.

Si el teu sistema està configurat per reduir el moviment, l’animació comença aturada. Prem Reprodueix si vols executar-la igualment.

Què vol dir cubic-bezier()

Una funció d’easing de CSS associa el temps transcorregut d’una transició (de 0 a 1) amb el seu progrés (de 0 a 1). cubic-bezier(x1, y1, x2, y2) descriu aquesta associació amb una corba de Bézier cúbica que comença a (0, 0), acaba a (1, 1) i és estirada per dos punts de control, P1 = (x1, y1) i P2 = (x2, y2).

• Els valors x són temps i han de quedar entre 0 i 1, altrament la funció no seria una corba de temps vàlida. L’editor els manté dins de l’interval.
• Els valors y són progrés i poden baixar de 0 o superar 1. Una y superior a 1 fa que l’animació passi de l’objectiu i torni enrere, com les corbes Back; per sota de 0, primer es mou cap enrere.
• Un pendent pronunciat vol dir moviment ràpid, i un pendent pla, moviment lent. ease-out comença ràpid i acaba lent, cosa que resulta natural per als elements que entren a la pantalla. ease-in fa el contrari i va bé per als elements que en surten.

Les paraules clau de CSS són dreceres: 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).

L’aproximació amb linear()

La funció més nova linear() llista valors de progrés a intervals de temps iguals, per exemple linear(0, 0.25, 0.5, 0.75, 1), i els uneix amb línies rectes. L’eina mostreja la teva corba (resol la corba de Bézier per a cada pas de temps) i escriu aquests valors amb tres decimals. Amb 20 a 40 segments, el resultat és visualment idèntic a la corba. El veritable avantatge de linear() és per a corbes que una corba de Bézier no pot dibuixar, com els rebots i les molles, però també permet compartir una única sintaxi. Funciona a Chrome i Edge 113+, Firefox 112+ i Safari 17.2+, així que conserva el valor cubic-bezier() com a alternativa.