Numerele reale din spatele CSS-ului ease-in-out
Proiectați o funcție de sincronizare CSS cubic-bezier() personalizată trăgând două puncte de control, previzualizați-o în direct față de o referință liniară, apoi copiați valoarea gata.
Rezultat
Această pagină deschide generatorul cubic-bezier cu x1=0.42, y1=0, x2=0.58, y2=1 deja încărcat - punctele de control exacte la care se extinde cuvântul cheie CSS ease-in-out. Trageți oricare mâner sau editați numerele direct, iar curba, previzualizarea animației și șirul care poate fi copiat se actualizează imediat.
ease-in-out este unul dintre cele cinci cuvinte cheie de sincronizare CSS încorporate și este popular tocmai pentru că această curbă accelerează ușor de la început, menține un ritm destul de uniform prin mijloc și coboară ușor înainte de sfârșit - o formă care se citește ca naturală pentru majoritatea mișcărilor UI. Văzându-l ca puncte de control explicite în loc de numele unui cuvânt cheie, este evident de ce: y1 se află lângă 0 și y2 se află lângă 1, ambele aproape de x potrivire, deci nu există depășire în nicio direcție.
Folosiți aceste patru numere ca punct de plecare, mai degrabă decât cuvântul cheie în sine, ori de câte ori aveți nevoie să împingeți ușor senzația - trageți x1 în jos pentru un început mai rapid sau apăsați y2 deasupra 1 pentru a transforma aceeași formă într-o depășire ușoară. Fiecare modificare actualizează instantaneu previzualizarea și linia cubic-bezier() copiabilă.