Change CSS filter property with Animation



To implement animation on filter property with CSS, you can try to run the following code

Example

Live Demo

<!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>Performing Animation on filter property</h2>       <div></div>    </body> </html>
Updated on: 2020-06-25T13:13:26+05:30

338 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements