CSS Cubic Bezier જનરેટર
ઇઝિંગ કર્વ બનાવવા માટે બે હેન્ડલ્સ ખેંચો, એનિમેશનની ગતિ જુઓ અને cubic-bezier() વેલ્યુ કૉપિ કરો.
cubic-bezier(0.25, 0.1, 0.25, 1)આ કર્વ સીધો તમારા બ્રાઉઝરમાં જ ડ્રો થાય છે. તમે અહીં સેટ કરેલી કોઈપણ માહિતી BroBroGo પર અપલોડ થતી નથી.
વારંવાર પૂછાતા પ્રશ્નો
બે હેન્ડલ્સ અને ચાર નંબરોનો અર્થ શું છે?
આ કર્વ નીચે-ડાબે (શરૂઆત) થી ઉપર-જમણે (અંત) સુધી ચાલે છે, જેમાં સમય ડાબેથી જમણે જાય છે અને પ્રગતિ ઉપર તરફ જાય છે. બે હેન્ડલ્સ તેને વાળવા માટેના કંટ્રોલ પોઇન્ટ્સ છે — દરેક પાસે X અને Y હોય છે, તેથી તેઓ સાથે મળીને cubic-bezier(x1, y1, x2, y2) બને છે. X હંમેશા 0 અને 1 ની વચ્ચે રહે છે, જ્યારે Y ઓવરશૂટ કરવા માટે ઉપર અથવા નીચે જઈ શકે છે.
હું મારા CSS માં આ વેલ્યુનો ઉપયોગ કેવી રીતે કરું?
cubic-bezier() ને કૉપિ કરો અને તેને ટાઇમિંગ ફંક્શન તરીકે વાપરો — જેમ કે transition-timing-function, animation-timing-function, અથવા શોર્ટહેન્ડમાં, દા.ત. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). ease, ease-in, ease-out અને ease-in-out કીવર્ડ્સ એ માત્ર ફિક્સ cubic-bezier કર્વ્સ છે, તેથી તેમાંથી કોઈપણ પ્રીસેટ પસંદ કરવાથી તમને તેની પાછળની ચોક્કસ વેલ્યુ જોવા મળશે.
શું આનાથી બાઉન્સ (bounce) અથવા ઇલાસ્ટિક ઇફેક્ટ બનાવી શકાય?
પોતાની મેળે નહીં. એક સિંગલ cubic-bezier એન્ટિસિપેટ (anticipate) અને ઓવરશૂટ (overshoot) કરી શકે છે — "back" પ્રીસેટ્સ બરાબર આવું કરવા માટે એક હેન્ડલને બોક્સની બહાર ખેંચે છે — પરંતુ તે માત્ર એક જ દિશામાં આગળ વધીને સ્થિર થઈ શકે છે. બાઉન્સ (Bounce) અને ઇલાસ્ટિક (elastic) ઇફેક્ટ્સ ઘણી વખત દિશા બદલે છે, જે એક સિંગલ cubic-bezier દ્વારા દર્શાવી શકાતી નથી; તેના માટે CSS keyframes અથવા ઘણા સ્ટોપ્સ સાથે linear() ફંક્શનની જરૂર પડે છે.