Skutočné čísla v pozadí CSS jednoduchosť in-out
Navrhnite si vlastnú funkciu časovania CSS cubic-bezier() pretiahnutím dvoch kontrolných bodov, ukážte ich naživo oproti lineárnej referencii a potom skopírujte hotovú hodnotu.
Výsledok
Táto stránka otvorí kubický-bezierov generátor s už načítaným x1=0,42, y1=0, x2=0,58, y2=1 — presné kontrolné body, na ktoré sa rozšíri kľúčové slovo CSS easy-in-out. Potiahnite buď rukoväť alebo priamo upravte čísla a krivka, ukážka animácie a kopírovateľný reťazec sa okamžite aktualizujú.
Easy-in-out je jedným z piatich vstavaných časovacích kľúčových slov CSS a je populárne práve preto, že táto krivka sa od začiatku jemne zrýchľuje, v strede drží pomerne rovnomerné tempo a pred koncom sa uvoľňuje späť – tvar, ktorý sa pre väčšinu pohybov používateľského rozhrania javí ako prirodzený. Keď to vidíte ako explicitné kontrolné body namiesto názvu kľúčového slova, je zrejmé, prečo: y1 je blízko 0 a y2 je blízko 1, obe sú blízko k zodpovedajúcemu x, takže nedochádza k prekročeniu v žiadnom smere.
Tieto štyri čísla použite ako východiskový bod, a nie samotné kľúčové slovo, kedykoľvek potrebujete mierne postrčiť pocit – potiahnite x1 nadol pre rýchlejší začiatok alebo stlačte y2 nad 1, aby ste ten istý tvar zmenili na jemný presah. Každá zmena okamžite aktualizuje náhľad a kopírovateľný riadok cubic-bezier().