Generátor CSS Cubic Bezier
Tažením dvou táhel vytvořte křivku plynulosti, sledujte pohyb bodu v porovnání s rovnoměrným pohybem a zkopírujte hodnotu cubic-bezier().
cubic-bezier(0.25, 0.1, 0.25, 1)Křivka se vykresluje přímo ve vašem prohlížeči. Nic z toho, co zde nastavíte, se neodesílá na servery BroBroGo.
Časté dotazy
Co znamenají dvě táhla a čtyři čísla?
Křivka probíhá od levého dolního rohu (začátek) do pravého horního rohu (konec), přičemž čas plyne zleva doprava a postup jde nahoru. Obě táhla jsou řídicí body, které ji ohýbají – každý má souřadnice X a Y, takže dohromady tvoří cubic-bezier(x1, y1, x2, y2). X zůstává mezi 0 a 1, zatímco Y může jít nad horní okraj nebo pod dolní okraj, což způsobí překmitnutí pohybu nebo jeho stažení zpět před ustálením.
Jak mohu hodnotu použít ve svém CSS?
Zkopírujte cubic-bezier() a vložte jej kamkoli, kde se používá časová funkce – transition-timing-function, animation-timing-function nebo zkrácený zápis, např. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Klíčová slova ease, ease-in, ease-out a ease-in-out jsou jen pevné křivky cubic-bezier, takže výběr jedné z těchto předvoleb vám ukáže přesnou hodnotu za daným klíčovým slovem.
Dokáže vytvořit efekt odrazu nebo pružnosti?
Sama o sobě ne. Jedna křivka cubic-bezier dokáže vytvořit rozběh a překmit – předvolby „back“ vytáhnou jedno táhlo mimo box, aby přesně tohle udělaly – ale dokáže se pohybovat pouze jedním směrem a pak se ustálit. Efekty odrazu (bounce) a pružnosti (elastic) mění směr několikrát, což žádná samostatná křivka cubic-bezier nedokáže vyjádřit; pro ty jsou potřeba CSS klíčové snímky (keyframes) nebo funkce linear() s mnoha body.