CSS Cubic-Bezier генератор

Šta je ovaj alat?

cubic-bezier() је CSS функција тајминга која контролише како се анимирана или прелазна вредност убрзава и успорава током времена, уместо да се креће константном брзином. Дефинисана је двема контролним тачкама — (x1, y1) и (x2, y2) — које савијају криву између фиксне почетне тачке (0,0) и фиксне крајње тачке (1,1). Вредности x морају остати између 0 и 1, али вредности y могу изаћи изван тог опсега да би се створили ефекти прекорачења или одскока.

Када се пише ручно, подешавање четири децимална броја да би се постигао осећај који није ни превише нагао ни превише мекан захтева много покушаја и грешака. Овај алат замењује то нагађање директном манипулацијом: превуците клизач, посматрајте како се крива савија, а лоптица за преглед креће у складу с тим, и копирајте CSS код чим покрет буде осећао како треба.

Извор: CSS Easing Functions Level 1, W3C — спецификација која дефинише cubic-bezier() и пет именованих кључних речи на којима се заснивају готова подешавања овог алата.

Zašto ga koristiti?

• Живи SVG графикон показује тачно како се ваша крива савија између фиксне почетне и крајње тачке, при чему су обе контролне тачке и њихове ручке нацртане ради јасноће.
• Дугме за пуштање анимира елемент за преглед дуж стазе користећи вашу тачну криву, тако да можете осетити покрет, а не само видети статички графикон.
• Готова подешавања једним кликом за пет стандардних именованих функција успоравања — ease, ease-in, ease-out, ease-in-out и linear — како је документовано у спецификацији CSS Easing Functions.
• Вредности Y могу ићи испод 0 или изнад 1, што вам омогућава да направите ефекте прекорачења/одскока какве именоване кључне речи не могу произвести.
• Даје CSS спреман за лепљење под именом transition-timing-function — иста вредност ради и за animation-timing-function.
• Ради у потпуности у вашем прегледачу — ништа од онога што подесите се никуда не отпрема. Бесплатно, без пријаве.

Kako se koristi

1. Превуците клизаче x1/y1 да поставите прву контролну тачку, која обликује како анимација почиње.
2. Превуците клизаче x2/y2 да поставите другу контролну тачку, која обликује како анимација завршава.
3. Пратите црну криву на графикону — крива која се испупчује изнад дијагонале на почетку значи да покрет почиње брзо, а она која остаје испод ње значи да покрет почиње споро.
4. Кликните на Пусти да видите како се елемент за преглед креће дуж стазе користећи вашу криву као transition-timing-function.
5. Испробајте готово подешавање (ease, ease-in, ease-out, ease-in-out, linear) као полазну тачку, а затим одатле фино подесите клизаче.
6. Копирајте генерисани CSS код и налепите га у transition или animation правило.

Primer

Unos

x1: 0.25, y1: 0.1, x2: 0.25, y2: 1

Rezultat

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Ово је стандардна CSS кључна реч ease исписана као експлицитне контролне тачке — брз почетак, оштро убрзање, а затим постепено успоравање ка крају.

Зашто вредности y могу прећи 0–1

За разлику од x-осе, која представља време и мора ићи од 0 до 1, y-оса представља напредак анимиране вредности и нема такво ограничење. Постављање y1 испод 0 или y2 изнад 1 чини да крива падне испод почетне вредности или прескочи крајњу вредност пре него што се стабилизује — то је основа ефеката прекорачења и очекивања који се користе код притиска дугмади, појављивања модалних прозора и играрских микро-интеракција у корисничком интерфејсу. Ниједна од пет именованих кључних речи (ease, ease-in, ease-out, ease-in-out, linear) не може ово произвести; за то је потребна прилагођена cubic-bezier().

transition-timing-function наспрам animation-timing-function

Вредност cubic-bezier() коју овај алат генерише ради идентично у обе особине. Користите transition-timing-function када је покрет покренут променом стања (као што је прелазак мишем или пребацивање класе), а animation-timing-function унутар правила анимације вођеног помоћу @keyframes када вам је потребан исти осећај успоравања примењен аутоматски или у петљи.

Уобичајени обрасци успоравања

• Брза повратна информација корисничког интерфејса (дугмад, прекидачи): држите контролне тачке близу дијагонале уз благу ease-out тенденцију, нпр. cubic-bezier(0.4, 0, 0.2, 1).
• Стандардна крива Material Design-а: cubic-bezier(0.4, 0, 0.2, 1) — брз почетак, благ завршетак, широко коришћена за прелазе панела и картица.
• Одскок/прекорачење: гурните y2 изнад 1, нпр. cubic-bezier(0.34, 1.56, 0.64, 1), за играрски осећај појављивања.
• Очекивање пре покрета: гурните y1 испод 0 тако да се елемент благо повуче уназад пре него што крене напред.
• Глатко ease-in-out за анимације у петљи: држите криву блиску симетричној у односу на средину.

Комбиновање са другим CSS алатима

Крива успоравања ретко стоји сама — обично се примењује на елемент којем су такође потребне дефинисане сенке, заобљени углови или градијенти. Направите визуелни стил помоћу других CSS алата испод, а затим додајте функцију тајминга из овог алата истом правилу или transition/animation декларацији.

→ Box Shadow Generator · Border Radius Generator

Često postavljana pitanja