CSS Cubic Bezier Generator
Povucite dvije ručice kako biste oblikovali krivulju ubrzanja, pratite kretanje točke u usporedbi sa stabilnom brzinom i kopirajte cubic-bezier() vrijednost.
cubic-bezier(0.25, 0.1, 0.25, 1)Krivulja se iscrtava izravno u Vašem pregledniku. Ništa što ovdje postavite ne šalje se na BroBroGo.
Česta pitanja
Što znače dvije ručice i četiri broja?
Krivulja se proteže od donjeg lijevog kuta (početak) do gornjeg desnog kuta (kraj), pri čemu vrijeme teče s lijeva na desno, a napredak ide prema gore. Dvije ručice su kontrolne toč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 prebačaj (overshoot) ili povlačenje prije smirivanja.
Kako mogu koristiti ovu vrijednost u svom CSS-u?
Kopirajte cubic-bezier() i umetnite ga svugdje gdje ide funkcija vremenskog usklađivanja (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 samo su fiksne cubic-bezier krivulje, pa odabir nekog od tih predložaka prikazuje točnu vrijednost iza te ključne riječi.
Može li se postići efekt odskoka (bounce) ili elastičnosti?
Ne sama po sebi. Jedna cubic-bezier krivulja može stvoriti efekt iščekivanja i prebačaja (overshoot) — predlošci "back" povlače jednu ručicu izvan okvira kako bi postigli upravo to — ali može se kretati samo u jednom smjeru i zatim se smiriti. Efekti odskoka (bounce) i elastičnosti mijenjaju smjer nekoliko puta, što niti jedna pojedinačna cubic-bezier krivulja ne može izraziti; za to su vam potrebni CSS keyframes ili funkcija linear() s mnogo točaka.