CSS font प्रॉपर्टी पर एनिमेशन करें

CSS में font शॉर्टहैंड प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह फ़ॉन्ट आकार, परिवार, वजन आदि को एक साथ एनिमेट कर सकता है।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      p { 
        border: 2px solid black; 
        width: 400px; 
        height: 100px; 
        animation: myanim 5s infinite; 
      } 
      @keyframes myanim { 
        70% { 
          font: 35px arial, sans-serif; 
        } 
      } 
    </style> 
  </head> 
  <body> 
    <p>यह डेमो टेक्स्ट है</p> 
  </body> 
</html>

व्याख्या: font शॉर्टहैंड प्रॉपर्टी font-size, font-family आदि सेट करती है। एनिमेशन के 70% पर फ़ॉन्ट 35px Arial हो जाता है। ध्यान दें कि सभी फ़ॉन्ट-संबंधी प्रॉपर्टीज़ एनिमेटेबल नहीं हैं; font-size एनिमेटेबल है लेकिन font-family नहीं।