CSS கியூபிக் பெசியர் உருவாக்கி

வளைவு கீழ்-இடதுபுறத்தில் (தொடக்கம்) இருந்து மேல்-வலதுபுறம் (முடிவு) வரை இயங்குகிறது, நேரம் இடமிருந்து வலமாகவும், முன்னேற்றம் மேலாகவும் செல்கிறது. இரண்டு கைப்பிடிகள் அதை வளைக்கும் கட்டுப்பாட்டு புள்ளிகள் ஆகும் — ஒவ்வொன்றிலும் ஒரு X மற்றும் Y உள்ளது, எனவே அவை ஒன்றாக cubic-bezier(x1, y1, x2, y2) ஆகும். X எப்போதும் 0 மற்றும் 1 க்கு இடையில் இருக்கும், அதே நேரத்தில் Y இயக்கத்தை எல்லை மீறச் செய்ய அல்லது நிலைபெறுவதற்கு முன்பு பின்வாங்கச் செய்ய மேலே அல்லது கீழே செல்லலாம்.

cubic-bezier()-ஐ நகலெடுத்து, நேரச் சார்பு (timing function) தேவைப்படும் இடங்களில் பயன்படுத்தவும் — 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 வளைவுகள் மட்டுமே, எனவே அந்த முன்னமைவுகளில் ஒன்றைத் தேர்ந்தெடுப்பது அதன் பின்னால் உள்ள துல்லியமான மதிப்பைக் காட்டுகிறது.

தனியாக முடியாது. ஒரு ஒற்றை cubic-bezier எதிர்பார்த்து பின்வாங்கவும் மற்றும் எல்லை மீறவும் (overshoot) முடியும் — "back" முன்னமைவுகள் சரியாக அதைச் செய்ய ஒரு கைப்பிடியை பெட்டிக்கு வெளியே இழுக்கின்றன — ஆனால் அது ஒரு வழியில் மட்டுமே நகர்ந்து பின்னர் நிலைபெற முடியும். Bounce மற்றும் elastic ஆகியவை திசையை பல முறை மாற்றுகின்றன, அதை ஒரு ஒற்றை cubic-bezier மூலம் வெளிப்படுத்த முடியாது; அதற்கு CSS keyframes அல்லது பல நிறுத்தங்களைக் கொண்ட linear() செயல்பாடு தேவை.