Cubic-bezier kurba-sortzailea

Azelerazio-kurbak (timing function) erabakitzen du CSS trantsizio edo animazio batek nola aurrera egiten duen denboran. Arrastatu bi kontrol-puntuak, probatu emaitza adibideko animazioan eta kopiatu cubic-bezier() balioa.

Zer da cubic-bezier()?

transition-timing-function eta animation-timing-function propietateek (edo transition propietatearen hirugarren balioak) adierazten dute aldaketa nola banatzen den iraupenean zehar. cubic-bezier(x1, y1, x2, y2) funtzioak Bézier kurba kubiko bat definitzen du, (0, 0) puntuan hasi eta (1, 1) puntuan amaitzen dena, bi kontrol-punturekin: X ardatza denbora da eta Y ardatza, aurrerapena.

CSSko gako-hitzak aurrez definitutako kurbak dira: ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1) eta ease-in-out = (0.42, 0, 0.58, 1). easeIn…/easeOut… kurbak Robert Pennerren kurba klasikoak dira, animazio-liburutegietan asko erabiltzen direnak.

Aholkuak

X balioek 0 eta 1 artean egon behar dute, baina Y balioak tarte horretatik atera daitezke: 0tik behera edo 1etik gora, animazioa «pasatu» eta itzuli egiten da, easeOutBack kurbaren errebote leuna bezala. Pantailan agertzen diren elementuetarako irteera-kurbek (ease-out) funtzionatzen dute hobekien normalean: azkar hasi eta amaieran balazta egiten dute; joaten direnetarako, sarrera-kurbek (ease-in).

150 eta 400 ms arteko iraupenak dira ohikoenak interfazeetan. Gogoratu animazio gutxiago nahiago dutenen prefers-reduced-motion hobespena errespetatzea.