CSS Cubic Bezier Generator
Povucite dvije ručice da oblikujete krivu ubrzanja, posmatrajte kretanje tačke u poređenju sa ravnomjernim i kopirajte cubic-bezier() vrijednost.
cubic-bezier(0.25, 0.1, 0.25, 1)Kriva se iscrtava direktno u Vašem pregledniku. Ništa što ovdje postavite ne šalje se na BroBroGo.
Česta pitanja
Šta znače dvije ručice i četiri broja?
Kriva se proteže od donjeg lijevog ugla (početak) do gornjeg desnog ugla (kraj), pri čemu vrijeme teče s lijeva na desno, a napredak ide prema gore. Dvije ručice su kontrolne tačke koje je savijaju — svaka ima X i Y koordinatu, pa zajedno čine cubic-bezier(x1, y1, x2, y2). X uvijek ostaje između 0 i 1, dok Y može ići iznad vrha ili ispod dna kako bi se stvorio efekat prebacivanja ili povlačenja unazad prije nego što se kretanje smiri.
Kako da koristim ovu vrijednost u svom CSS-u?
Kopirajte cubic-bezier() i umetnite ga tamo gdje ide funkcija vremenskog rasporeda (timing function) — transition-timing-function, animation-timing-function ili skraćeni oblik, npr. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Ključne riječi ease, ease-in, ease-out i ease-in-out su samo fiksne cubic-bezier krive, tako da odabir nekog od tih predložaka prikazuje tačnu vrijednost iza te ključne riječi.
Može li se napraviti efekat odskakanja ili elastičnosti?
Ne samostalno. Jedan cubic-bezier može napraviti efekat iščekivanja i prebacivanja — predlošci "back" povlače jednu ručicu izvan okvira upravo da bi to postigli — ali se može kretati samo u jednom smjeru i zatim smiriti. Efekti odskakanja (bounce) i elastičnosti mijenjaju smjer nekoliko puta, što se ne može izraziti jednom cubic-bezier krivom; za to su vam potrebni CSS keyframes ili funkcija linear() sa mnogo tačaka.