ट्रांज़िशन शॉर्टहैंड प्रॉपर्टी हमें transition-property, transition-duration, transition-timing function और transition-delay को एक लाइन में transition प्रॉपर्टी के मान के रूप में निर्दिष्ट करने की अनुमति देती है।
CSS में ट्रांज़िशन शॉर्टहैंड प्रॉपर्टी का कोड निम्न है -
उदाहरण
<!DOCTYPE html> <html> <head> <style> .container div { width: 300px; height: 100px; border-radius: 1px; background-color: rgb(25, 0, 255); border: 2px solid red; transition: border-radius 2s ease 1s, background-color 2s ease-out 1s ; } .container:hover div { background-color: purple; border-radius: 50%; } </style> </head> <body> <h1>Transition shorthand property</h1> <div class="container"> <div></div> </div> <h2>Hover over the above div to change its color and its shape to oval</h2> </body> </html>आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
