Generador de CSS Cubic Bezier
Arrossegui els dos controladors per dissenyar una corba de transició, observi el moviment d'un punt en comparació amb un de constant i copiï el valor cubic-bezier().
cubic-bezier(0.25, 0.1, 0.25, 1)La corba es dibuixa directament al seu navegador. Cap dada que defineixi aquí es puja a BroBroGo.
PMF
Què signifiquen els dos controladors i els quatre números?
La corba va des de la part inferior esquerra (l'inici) fins a la part superior dreta (el final), on el temps avança d'esquerra a dreta i el progrés va cap amunt. Els dos controladors són els punts de control que la curven: cadascun té una X i una Y, de manera que junts formen cubic-bezier(x1, y1, x2, y2). La X es manté entre 0 i 1, mentre que la Y pot anar per sobre del límit superior o per sota de l'inferior per fer que el moviment es sobrepassi o es retregui abans d'estabilitzar-se.
Com utilitzo el valor al meu CSS?
Copieu el cubic-bezier() i col·loqueu-lo on vagi una funció de temporització: transition-timing-function, animation-timing-function o la forma abreujada, per exemple, transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Les paraules clau ease, ease-in, ease-out i ease-in-out són només corbes cubic-bezier fixes, de manera que en triar un d'aquests preajustaments es mostra el valor exacte que hi ha darrere de la paraula clau.
Es pot crear un efecte de rebot o elàstic?
No per si sol. Un únic cubic-bezier pot anticipar i sobrepassar (els preajustaments "back" estiren un dels controladors més enllà de la caixa per fer precisament això), però només pot moure's en una direcció i després estabilitzar-se. Els efectes de rebot (bounce) o elàstics inverteixen la direcció diverses vegades, cosa que cap cubic-bezier individual pot expressar; per a això es necessiten fotogrames clau (keyframes) CSS o la funció linear() amb molts punts de parada.