CSS width प्रॉपर्टी को एनिमेट करें

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

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      div { 
        width: 300px; 
        height: 250px; 
        background-color: maroon; 
        color: white; 
        animation: myanim 3s; 
      } 
      @keyframes myanim { 
        30% { 
          width: 500px; 
        } 
      } 
    </style> 
  </head> 
  <body> 
    <h1>CSS width प्रॉपर्टी</h1> 
    <div> 
      <h1>यह डेमो टेक्स्ट है!</h1> 
    </div> 
  </body> 
</html>

व्याख्या: डिव की प्रारंभिक चौड़ाई 300px है। एनिमेशन के 30% पर यह 500px तक फैल जाती है। एनिमेशन 3s (infinite नहीं) केवल एक बार चलता है। width एनिमेटेबल है, लेकिन auto मान एनिमेट नहीं किया जा सकता।