CSS min-width प्रॉपर्टी पर एनिमेशन करें

CSS में min-width प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह तत्व की न्यूनतम चौड़ाई को समय के साथ बदलता है।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      div { 
        overflow: auto; 
        width: 50%; 
        background-color: blue; 
        color: white; 
        border: 1px solid black; 
        animation: myanim 3s infinite; 
      } 
      @keyframes myanim { 
        30% { 
          min-width: 550px; 
        } 
      } 
    </style> 
  </head> 
  <body> 
    <h1>min-width का उदाहरण</h1> 
    <div> 
      <p>यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।</p> 
    </div> 
  </body> 
</html>

व्याख्या: डिव की चौड़ाई 50% है, लेकिन min-width प्रारंभ में सेट नहीं है (डिफ़ॉल्ट 0)। एनिमेशन के 30% पर min-width: 550px सेट होता है, जिससे डिव कम से कम 550px चौड़ा हो जाता है, भले ही 50% छोटा हो। overflow: auto सामग्री फिट न होने पर स्क्रॉलबार जोड़ता है।