Generator CSS Cubic Bezier
Trageți de cele două mânere pentru a modela o curbă de atenuare, urmăriți mișcarea unui punct comparativ cu una constantă și copiați valoarea cubic-bezier().
cubic-bezier(0.25, 0.1, 0.25, 1)Curba este desenată direct în browserul dumneavoastră. Nimic din ceea ce setați aici nu este încărcat pe BroBroGo.
Întrebări frecvente
Ce reprezintă cele două mânere și cele patru numere?
Curba pornește din stânga-jos (începutul) și ajunge în dreapta-sus (sfârșitul), timpul curgând de la stânga la dreapta, iar progresul de jos în sus. Cele două mânere sunt punctele de control care o curbează — fiecare are coordonate X și Y, formând împreună cubic-bezier(x1, y1, x2, y2). Coordonata X rămâne întotdeauna între 0 și 1, în timp ce Y poate depăși limita superioară sau inferioară pentru a crea un efect de depășire (overshoot) sau de retragere înainte de stabilizare.
Cum folosesc valoarea în codul meu CSS?
Copiați funcția cubic-bezier() și introduceți-o oriunde este necesară o funcție de temporizare — transition-timing-function, animation-timing-function sau în forma prescurtată, de exemplu transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Cuvintele-cheie ease, ease-in, ease-out și ease-in-out sunt doar curbe cubic-bezier fixe; selectarea uneia dintre aceste presetări vă va afișa valoarea exactă din spatele cuvântului-cheie.
Se poate crea un efect de tip ricoșeu (bounce) sau elastic?
Nu direct. O singură curbă cubic-bezier poate anticipa și depăși limita — presetările de tip „back” trag de un mâner dincolo de casetă tocmai pentru a obține acest lucru — dar se poate deplasa doar într-o direcție înainte de a se stabiliza. Efectele de tip ricoșeu (bounce) sau elastic își schimbă direcția de mai multe ori, lucru pe care o singură curbă cubic-bezier nu îl poate exprima; pentru acestea aveți nevoie de keyframes CSS sau de funcția linear() cu mai multe puncte de oprire.