CSS फ़िल्टर प्रॉपर्टी को एनिमेशन के साथ बदलें

CSS में filter प्रॉपर्टी पर एनिमेशन लागू करने के लिए, आप निम्न कोड का उपयोग कर सकते हैं। यह उदाहरण दर्शाता है कि कैसे @keyframes का उपयोग करके किसी तत्व के फ़िल्टर प्रभाव (जैसे कंट्रास्ट) को समय के साथ बदला जा सकता है।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      div { 
        width: 600px; 
        height: 300px; 
        background-image: url('https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg'); 
        border: 2px solid blue; 
        animation: myanim 3s infinite; 
        position: absolute; 
        column-rule: 10px inset orange; 
        column-count: 4; 
      } 
      @keyframes myanim { 
        20% { 
          filter: contrast(400%); 
        } 
      } 
    </style> 
  </head> 
  <body> 
    <h2>फ़िल्टर प्रॉपर्टी पर एनिमेशन करना</h2> 
    <div></div> 
  </body> 
</html>

व्याख्या: यहां एक div तत्व पर animation प्रॉपर्टी लागू की गई है जो 3 सेकंड में अनंत बार चलती है। @keyframes नियम में 20% पर filter: contrast(400%) सेट किया गया है, जिससे छवि का कंट्रास्ट बढ़ जाता है।