การสร้างแอนิเมชันสำหรับคุณสมบัติ CSS filter

หากต้องการนำการเคลื่อนไหว (animation) ไปใช้กับคุณสมบัติ filter ใน CSS สามารถทำได้โดยใช้ @keyframes ร่วมกับคุณสมบัติ animation ตัวอย่างโค้ดด้านล่างแสดงการเปลี่ยนแปลงค่า contrast ของรูปภาพแบบวนซ้ำ

ตัวอย่างโค้ด

<!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>การสร้างแอนิเมชันบนคุณสมบัติ filter</h2>
  <div></div>
</body>
</html>

คำอธิบาย: ในตัวอย่างนี้ กรอบ div จะมีการเปลี่ยนความคมชัด (contrast) ของภาพพื้นหลังเป็น 400% ที่จุด 20% ของระยะเวลาแอนิเมชัน 3 วินาที และจะวนซ้ำไปเรื่อยๆ (infinite) คุณสมบัติ filter รองรับฟังก์ชันหลายอย่าง เช่น blur(), brightness(), grayscale(), sepia() เป็นต้น ซึ่งสามารถนำไปประยุกต์ใช้ในแอนิเมชันได้เช่นกัน