CSS Motion Blur Filter: สร้างภาพเบลอเคลื่อนที่ (Legacy IE)

Motion Blur Filter (IE Legacy)

Motion Blur เป็นฟิลเตอร์เก่าของ Internet Explorer สร้างภาพเบลอ (blurred) ตามทิศทางและความเข้มที่กำหนด ใช้กับรูปภาพหรือข้อความ

พารามิเตอร์ 3 ตัว

ตัวอย่างการใช้งาน

<html>
<head></head>
<body>
  <img src="/css/images/logo.png" alt="CSS Logo" 
    style="filter: blur(add=0, direction=225, strength=10)">
  
  <p>Text Example:</p>
  <div style="
    width: 357px; height: 50px;
    font-size: 30pt; font-family: Arial Black;
    color: blue;
    filter: blur(add=1, direction=225, strength=10)
  ">CSS Tutorials</div>
</body>
</html>

⚠️ สำคัญ: เฉพาะ Internet Explorer

เป็น Microsoft proprietary filter ไม่ใช่มาตรฐาน W3C

ทางเลือกมาตรฐาน (Modern CSS)

1. CSS filter: blur()

.blur-simple { filter: blur(5px); }
.blur-hover:hover { filter: blur(0); transition: filter 0.3s; }

2. CSS Motion Blur จริง (Transform + Transition)

.motion-blur {
  transform: translateX(100px);
  transition: transform 0.3s ease-out;
  will-change: transform;
}

/* หรือใช้ animation */
@keyframes motion-blur {
  0% { transform: translateX(0) skewX(0); filter: blur(0); }
  50% { transform: translateX(50px) skewX(10deg); filter: blur(8px); }
  100% { transform: translateX(100px) skewX(0); filter: blur(0); }
}

3. SVG Filter (Advanced)

.motion-blur-svg {
  filter: url(#motion-blur);
}

4. will-change สำหรับ Performance

.optimized {
  will-change: transform, filter;
  transform: translateZ(0); /* GPU acceleration */
}