CSS Cubic Bezier rafall
Dragðu handföngin tvö til að móta hreyfisveigju, fylgstu með punktinum hreyfast og afritaðu cubic-bezier() gildið.
cubic-bezier(0.25, 0.1, 0.25, 1)Sveigjan er teiknuð beint í vafranum þínum. Engu af því sem þú stillir hér er hlaðið upp á BroBroGo.
Algengar spurningar
Hvað þýða handföngin tvö og tölurnar fjórar?
Sveigjan liggur frá neðst til vinstri (byrjun) til efst til hægri (endir), þar sem tíminn líður frá vinstri til hægri og framvinda fer upp á við. Handföngin tvö eru stýripunktarnir sem beygja hana — hvor um sig hefur X og Y gildi, svo saman mynda þeir cubic-bezier(x1, y1, x2, y2). X helst á bilinu 0 til 1, en Y getur farið yfir toppinn eða undir botninn til að láta hreyfinguna fara yfir markið eða bakka áður en hún jafnar sig.
Hvernig nota ég gildið í CSS-kóðanum mínum?
Afritaðu cubic-bezier() gildið og settu það inn þar sem tímasetningarfall á heima — transition-timing-function, animation-timing-function, eða í styttri rithætti, t.d. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Lykilorðin ease, ease-in, ease-out og ease-in-out eru bara fastar cubic-bezier sveigjur, svo þegar þú velur eina af þeim sérðu nákvæma gildið á bak við lykilorðið.
Getur þetta búið til skopp- eða fjaðurefni?
Ekki eitt og sér. Einföld cubic-bezier sveigja getur gert ráð fyrir eftirhlaupi og farið yfir markið — „back“ forstillingarnar draga annað handfangið út fyrir rammann til að gera einmitt það — en hún getur aðeins hreyfst í eina átt og jafnað sig svo. Skopp (bounce) eða fjaðrandi hreyfingar breyta um stefnu oft, sem ein og sér cubic-bezier sveigja getur ekki lýst; til þess þarf CSS keyframes eða linear() fallið með mörgum stoppum.