A CSS időzítési függvények alapjai és a cubic-bezier() szerepe
A CSS-átmenetek (transitions) és animációk (animations) alapértelmezetten egy meghatározott ütemterv szerint futnak le. Az időzítési függvények (timing functions) határozzák meg, hogy az animáció sebessége hogyan változik az idő függvényében: hol gyorsul fel, hol lassul le, vagy éppen egyenletes tempóban halad-e végig. A CSS-ben a legrugalmasabb módszer ezen mozgások leírására a cubic-bezier(x1, y1, x2, y2) függvény, amely egy harmadfokú Bezier-görbét használ az animáció sebességének és előrehaladásának pontos szabályozására.
A görbe egy kétdimenziós koordináta-rendszerben fut a bal alsó sarokból (a kiindulópont, amely az animáció kezdete) a jobb felső sarokba (a végpont, amely az animáció befejezése). Ebben a rendszerben az idő balról jobbra halad, míg az animáció előrehaladása (progress) lentről felfelé mutat. A görbe alakját két szabadon mozgatható vezérlőpont határozza meg, amelyeket a CSS-kódban koordinátapárokként adunk meg.
A vezérlőpontok koordinátái és korlátai
A cubic-bezier(x1, y1, x2, y2) függvény négy numerikus paramétert vár, amelyek a két belső vezérlőpont koordinátáit jelölik:
- Első vezérlőpont X koordinátája (x1): Értéke szigorúan 0 és 1 között mozoghat.
- Első vezérlőpont Y koordinátája (y1): Értéke -0.70 és 1.70 között változhat.
- Második vezérlőpont X koordinátája (x2): Értéke szigorúan 0 és 1 között mozoghat.
- Második vezérlőpont Y koordinátája (y2): Értéke -0.70 és 1.70 között változhat.
Az X tengely az eltelt idő arányát reprezentálja, ezért nem léphet ki a 0 és 1 közötti tartományból (mivel az animáció ideje nem folyhat visszafelé, és nem előzheti meg a jelent). Az Y tengely viszont az animáció előrehaladását mutatja. Az Y értékek átléphetik a 0 és 1 közötti normál tartományt: a negatív értékek (egészen -0.70-ig) a kezdőpont alá húzzák a görbét, míg az 1 feletti értékek (egészen 1.70-ig) a végpont fölé emelik azt. Ez teszi lehetővé a különleges visszahúzódási és túllövési effektusok létrehozását.
A CSS Cubic Bezier generátor használata és működése
A CSS Cubic Bezier generátor felületén a két fogantyú húzásával vizuálisan formálható az átmeneti görbe. A módosítások során a rendszer azonnal kirajzolja a görbét, és egy animált pont segítségével szemlélteti a mozgást. A vizuális összehasonlítás érdekében az egyedi görbe mellett egy állandó, egyenletes tempóban haladó (lineáris) pont is mozog.
Bemeneti lehetőségek és vezérlés
- Fogantyúk húzása: A görbe alakját közvetlenül a két vezérlőpont egérrel vagy érintéssel történő mozgatásával lehet beállítani.
- Numerikus mezők: Az Első vezérlőpont és Második vezérlőpont koordinátái kézzel is megadhatók a beviteli mezőkben.
- Billentyűzetes finomhangolás: Ha egy vezérlőpont fogantyúja fókuszban van, a Balra nyíl billentyű megnyomásával az érték finoman módosítható, például
0.99-re. - Előbeállítások: A gyors munkához előre definiált görbék is választhatók, mint például az "ease", "ease-in", "ease-out", "ease-in-out", valamint a dinamikusabb "Visszafelé be (Back In)", "Visszafelé ki (Back Out)" és "Visszafelé be-ki (Back In-Out)" opciók.
Hibakezelési és beviteli szabályok
A generátor beépített szabályokkal biztosítja, hogy a kapott CSS-kód mindig érvényes legyen:
- Ha az X koordináta mezőjébe a megengedettnél nagyobb értéket ír be (például
9-et), majd kilép a mezőből (elveszíti a fókuszt), az érték automatikusan visszaáll a maximális1értékre. - Ha teljesen kiüríti valamelyik numerikus mezőt, majd kilép belőle, a rendszer visszaállítja az adott mező legutóbbi érvényes értékét.
- Az üres vagy nem numerikus karaktereket tartalmazó bevitelek esetén a generátor nem frissít azonnal, hanem vár a teljes, érvényes számérték beírására.
Kimenetek és másolás
A felületen folyamatosan látható az aktuális görbe vizuális képe, valamint a pontos CSS-kód. A generált érték kimásolása után a felületen megjelenik a sikeres másolást jelző állapot.
Speciális mozgások: Visszahúzódás és túllövés
A standard időzítési függvények (mint az ease-in vagy ease-out) finom, de egyszerű gyorsulásokat és lassulásokat produkálnak. Ha azonban az Y koordinátákat a 0–1 tartományon kívülre állítja, drámaibb hatásokat érhet el:
- Visszahúzódás (Anticipation / Pull-back): Ha az első vezérlőpont Y koordinátáját (y1) 0 alá (negatív tartományba, pl. -0.5-re) állítja, az animált elem a mozgás tényleges megkezdése előtt kissé hátrafelé mozdul el, mintha lendületet venne.
- Túllövés (Overshoot): Ha a második vezérlőpont Y koordinátáját (y2) 1 fölé (pl. 1.5-re) állítja, az elem az animáció végén túlhalad a célpozíción, majd finoman visszatér a végleges helyére.
Kiváló példa erre a "Visszafelé ki (Back Out)" előbeállítás, amely a következő pontos értékre állítja a függvényt:
cubic-bezier(0.34, 1.56, 0.64, 1)
Ebben az esetben az 1.56-os Y2 érték gondoskodik arról, hogy a mozgás látványosan túllőjön a célon, mielőtt beállna a végállapotba.
A cubic-bezier() korlátai
Bár a cubic-bezier rendkívül sokoldalú, fontos megérteni a fizikai korlátait. Egyetlen cubic-bezier() függvény kizárólag olyan mozgásokat képes leírni, amelyek elindulnak, legfeljebb egyszer előkészítő mozgást végeznek (visszahúzódás), egyszer túllőnek a célon, majd megállapodnak.
A függvény nem képes olyan összetett mozgások ábrázolására, amelyek többször is irányt váltanak. Így például a pattogó (bounce) vagy a többszörös oda-vissza rezgést végző rugalmas (elastic) hatások nem valósíthatók meg egyetlen cubic-bezier görbével. Az ilyen komplex animációkhoz több kulcskockát (CSS @keyframes) vagy a sok pontból álló linear() időzítési függvényt kell alkalmazni.
Integráció a CSS-kódba
A generált értéket a CSS-ben a transition-timing-function vagy az animation-timing-function tulajdonságok értékeként kell megadni. Használható a rövidített (shorthand) tulajdonságokban is:
/* Különálló tulajdonságként */
.gomb {
transition-property: transform;
transition-duration: 0.4s;
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Rövidített formában */
.doboz {
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
Adatkezelés és adatvédelem
A CSS Cubic Bezier generátor használata során a görbe kiszámítása és kirajzolása teljes egészében közvetlenül a felhasználó böngészőjében történik. A beállított koordináták, egyedi értékek és paraméterek nem kerülnek feltöltésre a BroBroGo szervereire.
Gyakran Ismételt Kérdések
Mit jelent a két fogantyú és a négy szám?
A görbe a bal alsó sarokból (kezdet) a jobb felső sarokba (vég) fut, az idő balról jobbra telik, a folyamat előrehaladása pedig felfelé mutat. A két fogantyú a görbületet meghatározó vezérlőpont – mindegyik rendelkezik egy X és egy Y koordinátával, így együttesen alkotják a cubic-bezier(x1, y1, x2, y2) függvényt. Az X értéknek 0 és 1 között kell maradnia, míg az Y túlléphet a felső vagy alsó határon, hogy a mozgás túllőjön vagy visszahúzódjon a megállapodás előtt.
Hogyan használhatom ezt az értéket a CSS-ben?
Másolja ki a cubic-bezier() függvényt, és illessze be oda, ahol időzítési függvényt (timing function) használ – transition-timing-function, animation-timing-function, vagy a rövidített formában, pl. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Az ease, ease-in, ease-out és ease-in-out kulcsszavak csupán fix cubic-bezier görbék, így ezen előbeállítások kiválasztásakor láthatja a kulcsszó mögötti pontos értéket.
Létrehozható vele pattogó vagy rugalmas hatás?
Önmagában nem. Egyetlen cubic-bezier képes előkészítő mozgásra (anticipation) és túllövésre (overshoot) – a „back” előbeállítások pontosan ezt teszik azzal, hogy az egyik fogantyút a dobozon kívülre húzzák –, de csak egy irányba tud elmozdulni, majd megállapodni. A pattogó (bounce) és rugalmas (elastic) hatások többször is irányt váltanak, amit egyetlen cubic-bezier nem képes kifejezni; ezekhez CSS keyframes vagy a sok pontból álló linear() függvény szükséges.