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

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

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      #demo1 { 
        position: absolute; 
        top: 60px; 
        width: 300px; 
        height: 150px; 
        background-color: lightblue; 
        animation: myanim 4s infinite; 
      } 
      #demo2 { 
        position: absolute; 
        top: 90px; 
        left: 30px; 
        width: 300px; 
        height: 150px; 
        background-color: orange; 
        animation: myanim 3s infinite; 
      } 
      #demo3 { 
        position: absolute; 
        top: 120px; 
        left: 60px; 
        width: 350px; 
        height: 150px; 
        background-color: coral; 
      } 
      @keyframes myanim { 
        30% { 
          opacity: 0.4; 
        } 
      } 
    </style> 
  </head> 
  <body> 
    <p>पारदर्शिता दिखा रहा है</p> 
    <div id="demo1"><h1>अंतिम डिव</h1></div> 
    <div id="demo2"></div> 
    <div id="demo3"><h1>शुरुआती डिव</h1></div> 
  </body> 
</html>

व्याख्या: तीन ओवरलैपिंग डिव्स पर अलग-अलग अवधि के साथ समान एनिमेशन लागू होता है। 30% पर opacity: 0.4 (40% अपारदर्शी) हो जाता है। opacity: 1 पूर्ण अपारदर्शी, 0 पूर्ण पारदर्शी होता है।