CSS Cubic Bezier Генератор
Плъзнете двете дръжки, за да оформите крива на ускорение, наблюдавайте движението на точката спрямо постоянна скорост и копирайте cubic-bezier() стойността.
cubic-bezier(0.25, 0.1, 0.25, 1)Кривата се изчертава директно във Вашия браузър. Нищо от това, което настройвате тук, не се изпраща към BroBroGo.
ЧЗВ
Какво означават двете дръжки и четирите числа?
Кривата върви от долния ляв ъгъл (началото) до горния десен (края), като времето се движи от ляво на дясно, а прогресът — нагоре. Двете дръжки са контролните точки, които я огъват — всяка има X и Y координати, така че заедно образуват cubic-bezier(x1, y1, x2, y2). X винаги остава между 0 и 1, докато Y може да излиза над горната или под долната граница, за да накара движението да премине лимита или да се дръпне назад, преди да се установи.
Как да използвам стойността в моя CSS?
Копирайте cubic-bezier() и го поставете навсякъде, където се изисква функция за време — transition-timing-function, animation-timing-function или съкратения запис, напр. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Ключовите думи ease, ease-in, ease-out и ease-in-out са просто фиксирани cubic-bezier криви, така че изборът на някой от тези шаблони Ви показва точната стойност зад ключовата дума.
Може ли да създаде ефект на отскачане (bounce) или еластичност?
Не и самостоятелно. Единична cubic-bezier крива може да предвижда и преминава границите (overshoot) — шаблоните „back“ издърпват едната дръжка извън кутията точно за тази цел — но тя може да се движи само в една посока и след това да се установи. Ефектите на отскачане (bounce) и еластичност променят посоката си няколко пъти, което не може да бъде изразено с една cubic-bezier крива; за тях са необходими CSS keyframes или функцията linear() с множество точки.