CSS Cubic-Bezier generátor

Mi ez az eszköz?

A cubic-bezier() egy CSS időzítési függvény, amely azt szabályozza, hogyan gyorsul és lassul egy animált vagy átmenetben lévő érték az idő során, ahelyett hogy állandó sebességgel mozogna. Két vezérlőpont definiálja — (x1, y1) és (x2, y2) —, amelyek egy görbét hajlítanak egy fix kezdőpont (0,0) és végpont (1,1) között. Az x értékeknek 0 és 1 között kell maradniuk, de az y értékek e tartományon kívülre is mehetnek, hogy túllövéses vagy pattanó effektet hozzanak létre.

Kézzel írva négy tizedesszám finomhangolása, hogy sem túl hirtelen, sem túl puha hatást ne érjen el, sok próbálgatást igényel. Ez az eszköz közvetlen manipulációval helyettesíti ezt a tapogatózást: húzz egy csúszkát, nézd, ahogy a görbe hajlik és az előnézeti golyó ennek megfelelően mozog, majd másold ki a CSS-t, ha a mozgás jónak érződik.

Forrás: CSS Easing Functions Level 1, W3C — a specifikáció, amely definiálja a cubic-bezier()-t és az öt megnevezett kulcsszót, amelyeken ennek az eszköznek az előbeállításai alapulnak.

Miért érdemes használni?

• Az élő SVG-grafikon pontosan megmutatja, hogyan hajlik a görbéd a fix kezdő- és végpont között, mindkét vezérlőponttal és fogantyúival kirajzolva az áttekinthetőség kedvéért.
• A lejátszás gomb egy előnézeti elemet animál végig egy sávon a pontos görbéddel, így nem csak látod, hanem érzed is a mozgást, nem csak egy statikus grafikont.
• Egykattintásos előbeállítások az öt szabványos, megnevezett könnyítési függvényhez — ease, ease-in, ease-out, ease-in-out és linear —, ahogy a CSS Easing Functions specifikáció dokumentálja.
• Az y-értékek 0 alá vagy 1 fölé mehetnek, így olyan túllövéses/pattanó stílusú könnyítéseket építhetsz, amelyeket a megnevezett kulcsszavak nem tudnak létrehozni.
• Beillesztésre kész transition-timing-function CSS-t ad ki — ugyanaz az érték az animation-timing-function-nél is működik.
• Teljes egészében a böngésződben fut — semmi, amit beállítasz, nem kerül feltöltésre sehova. Ingyenes, nincs regisztráció.

Használati útmutató

1. Húzd az x1/y1 csúszkákat az első vezérlőpont beállításához, amely alakítja, hogyan indul az animáció.
2. Húzd az x2/y2 csúszkákat a második vezérlőpont beállításához, amely alakítja, hogyan ér véget az animáció.
3. Figyeld a fekete görbét a grafikonon — ha a görbe korán az átló fölé domborodik, az azt jelenti, a mozgás gyorsan indul; ha alatta marad, a mozgás lassan indul.
4. Kattints a Lejátszásra, hogy lásd, ahogy egy előnézeti elem végigmozog a sávon a görbédet használva transition-timing-function-ként.
5. Próbálj ki egy előbeállítást (ease, ease-in, ease-out, ease-in-out, linear) kiindulópontként, majd finomítsd onnan a csúszkákkal.
6. Másold ki a generált CSS-t, és illeszd be egy transition vagy animation szabályba.

Példa

Bemenet

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

Kimenet

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

Ez a szabványos CSS ease kulcsszó explicit vezérlőpontokként felírva — gyors kezdés, éles gyorsulás, majd fokozatos lassulás a vége felé.

Miért haladhatják meg az y-értékek a 0–1 tartományt

Az x-tengellyel ellentétben, amely az időt reprezentálja, és 0-tól 1-ig kell futnia, az y-tengely az animált érték előrehaladását reprezentálja, és nincs ilyen korlátja. Ha y1-et 0 alá vagy y2-t 1 fölé állítod, a görbe a kezdőérték alá süllyed vagy a végérték fölé lő, mielőtt megállapodna — ez az alapja a túllövéses és anticipációs effekteknek, amelyeket gombnyomásoknál, modálisok felugrásánál és játékos UI mikrointerakcióknál használnak. Egyik sem hozható létre az öt megnevezett kulcsszóval (ease, ease-in, ease-out, ease-in-out, linear); ehhez egyedi cubic-bezier() szükséges.

transition-timing-function vs. animation-timing-function

Az ezen eszköz által generált cubic-bezier() érték mindkét tulajdonságban azonosan működik. Használd a transition-timing-function-t, ha a mozgást egy állapotváltozás váltja ki (mint egy hover vagy egy osztály átkapcsolása), és az animation-timing-function-t egy @keyframes-alapú animációs szabályon belül, ha ugyanazt a könnyítési érzést automatikusan vagy ciklikusan szeretnéd alkalmazni.

Gyakori könnyítési minták

• Gyors UI visszajelzés (gombok, kapcsolók): tartsd a vezérlőpontokat közel az átlóhoz, enyhe ease-out torzítással, pl. cubic-bezier(0.4, 0, 0.2, 1).
• A Material Design szabványos görbéje: cubic-bezier(0.4, 0, 0.2, 1) — gyors kezdés, lágy befejezés, széles körben használt panel- és kártyaátmenetekhez.
• Pattanás/túllövés: told y2-t 1 fölé, pl. cubic-bezier(0.34, 1.56, 0.64, 1), egy játékos felugró hatásért.
• Anticipáció mozgás előtt: told y1-et 0 alá, hogy az elem kissé visszahúzódjon, mielőtt előrébb mozdulna.
• Sima ease-in-out ismétlődő animációkhoz: tartsd a görbét közel szimmetrikusan a középponthoz.

Párosítás más CSS eszközökkel

Egy könnyítési görbe ritkán áll önmagában — általában olyan elemre alkalmazzák, amelynek árnyékokra, lekerekített sarkokra vagy gradiensekre is szüksége van. Generáld le a vizuális stílust a lenti egyéb CSS eszközökkel, majd add hozzá az itteni időzítő függvényt ugyanahhoz a szabályhoz vagy egy transition/animation deklarációhoz.

→ Box Shadow Generátor · Border Radius Generátor

Gyakori kérdések