CSS filter 속성에 애니메이션 효과 적용하기

CSS filter 속성 애니메이션이란?

CSS의 filter 속성은 요소나 이미지에 흐림(blur), 밝기(brightness), 대비(contrast) 등 다양한 시각적 효과를 적용할 수 있는 강력한 도구입니다. 이 속성에 @keyframes 규칙을 활용한 애니메이션을 결합하면, 효과가 서서히 변화하는 역동적인 연출이 가능합니다.

filter 속성에 애니메이션을 적용하려면 먼저 @keyframes로 애니메이션 단계를 정의하고, 원하는 진행 시점(예: 20%, 50% 등)에 변경할 filter 값을 지정한 뒤, animation 속성으로 요소에 연결하면 됩니다.

예제 코드

아래 예제는 이미지가 담긴 div 요소에 대비(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>

코드 핵심 포인트

animation: myanim 3s infinite; — 'myanim'이라는 이름의 애니메이션을 3초 동안 한 번 실행하며, 무한히 반복합니다.
@keyframes myanim — 애니메이션의 중간 단계를 정의합니다. 여기서는 전체 진행률의 20% 지점에 contrast(400%)를 적용해 이미지 대비를 크게 높입니다.
20% 지점을 벗어나면 filter 값이 기본 상태로 되돌아가므로, 이미지의 대비가 주기적으로 강해졌다 약해지는 효과를 볼 수 있습니다.

응용 팁

contrast() 외에도 blur(), brightness(), saturate(), hue-rotate() 등 다양한 filter 함수를 keyframes 안에서 조합하면 더욱 풍부한 시각 효과를 만들 수 있습니다. 여러 시점(0%, 50%, 100%)에 값을 배치하면 변화의 흐름도 자유롭게 조절할 수 있습니다.