एकाधिक ट्रांज़िशन के लिए, CSS3 ट्रांज़िशन प्रॉपर्टी का उपयोग करें, जो एक शॉर्टहैंड प्रॉपर्टी है। यह संपत्ति, अवधि, समय और संक्रमण की देरी को एक पंक्ति में सेट करता है।
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> आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
