CSS cubic-bezier() फ़ंक्शन का उपयोग करके कस्टम ट्रांज़िशन टाइमिंग फ़ंक्शन परिभाषित करें, जो एनिमेशन की गति वक्र को नियंत्रित करता है।
उदाहरण
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: yellow; transition: width 3s; transition-timing-function: cubic-bezier(0.3, 0.3, 2.0, 0.9); } div:hover { width:200px; } </style> </head> <body> <p>Hover over the below container:</p> <div></div> </body> </html>
व्याख्या: cubic-bezier(0.3, 0.3, 2.0, 0.9) एक कस्टम ईजिंग कर्व बनाता है जहां एनिमेशन शुरू में धीमा, फिर तेज, फिर अंत में धीमा होता है। होवर पर चौड़ाई 100px से 200px हो जाती है।
