Skutečná čísla v pozadí CSS easy-in-out
Navrhněte vlastní funkci časování cubic-bezier() pomocí CSS přetažením dvou kontrolních bodů, prohlédněte si ji v živém náhledu proti lineární referenci a poté zkopírujte připravenou hodnotu.
Výsledek
Tato stránka otevře generátor cubic-bezier s již načteným x1=0,42, y1=0, x2=0,58, y2=1 – přesné kontrolní body, na které se rozvine klíčové slovo CSS easy-in-out. Přetáhněte buď úchyt, nebo čísla přímo upravte, a křivka, náhled animace a kopírovatelný řetězec se okamžitě aktualizují.
Easy-in-out je jedním z pěti vestavěných časovacích klíčových slov CSS a je populární právě proto, že tato křivka ze začátku jemně zrychluje, uprostřed drží poměrně rovnoměrné tempo a před koncem se zmírňuje – tvar, který se čte jako přirozený pro většinu pohybů uživatelského rozhraní. Vidíte-li to jako explicitní kontrolní body namísto názvu klíčového slova, je zřejmé, proč: y1 je blízko 0 a y2 je blízko 1, obě blízko odpovídající x, takže nedochází k překmitu v žádném směru.
Použijte tato čtyři čísla jako výchozí bod spíše než samotné klíčové slovo, kdykoli potřebujete pocit mírně pošťouchnout – zatáhněte x1 dolů pro rychlejší začátek, nebo stiskněte y2 nad 1, abyste ze stejného tvaru udělali jemný přesah. Každá změna okamžitě aktualizuje náhled a kopírovatelný řádek cubic-bezier().