मल्टीपल ट्रांज़िशन्स के लिए, CSS3 transition प्रॉपर्टी का उपयोग करें, जो एक शॉर्टहैंड प्रॉपर्टी है। यह एक ही लाइन में ट्रांज़िशन की प्रॉपर्टी, ड्यूरेशन, टाइमिंग और डिले सेट करता है।
CSS3 का उपयोग करके मल्टीपल ट्रांज़िशन्स परफॉर्म करने का कोड निम्न है -
उदाहरण
<!DOCTYPE html> <html> <head> <style> .container div { width: 300px; height: 100px; border-radius: 1px; background: rgb(25, 0, 255); border: 2px solid red; transition: width 2s, border-radius 2s; } .container:hover div { width: 100px; border-radius: 50%; } </style> </head> <body> <h1>Multiple transitions example</h1> <div class="container"> <div></div> </div> <h2> Hover over the above div to reduce its width and to change it into circle </h2> </body> </html>आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
