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

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

उदाहरण

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

व्याख्या: डिव की कोई प्रारंभिक अधिकतम चौड़ाई नहीं है (डिफ़ॉल्ट none)। एनिमेशन के 30% पर max-width: 250px सेट होता है, जिससे डिव 250px से अधिक चौड़ा नहीं हो सकता। animation: myanim 3s (infinite नहीं) केवल एक बार चलता है।