CSS를 활용한 플래시(Flash) 애니메이션 효과 구현하기

CSS 플래시(Flash) 애니메이션이란?

플래시 효과는 요소가 갑자기 밝은 빛처럼 번쩍이다가 사라지는 짧고 강렬한 시각 효과입니다. CSS에서는 @keyframes 규칙과 opacity(불투명도) 속성을 조합하면 JavaScript나 추가 이미지 없이도 이 효과를 간단하게 구현할 수 있습니다.

동작 원리

플래시 애니메이션의 핵심은 불투명도를 빠르게 반복 변화시키는 것입니다. 아래 예제의 @keyframes flash를 살펴보면 다음과 같습니다.

0%, 50%, 100% 지점에서는 opacity: 1 → 요소가 완전히 보입니다.
25%, 75% 지점에서는 opacity: 0 → 요소가 완전히 사라집니다.

이렇게 설정하면 애니메이션 1회 동안 요소가 두 번 깜빡이면서, 마치 카메라 플래시가 터지는 듯한 효과를 연출할 수 있습니다.

예제 코드

<html>
   <head>
      <style>
         .animated {
            background-image: url(/css/images/logo.png);
            background-repeat: no-repeat;
            background-position: left top;
            padding-top:95px;
            margin-bottom:60px;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
         }

         @keyframes flash {
            0%, 50%, 100% {
               opacity: 1;
            }
            25%, 75% {
               opacity: 0;
            }
         }

         .flash {
            animation-name: flash;
         }
      </style>

   </head>
   <body>

      <div id = "animated-example" class = "animated flash"></div>
      <button onclick = "myFunction()">Reload page</button>

      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

코드 설명

.animated 클래스는 배경 이미지와 여백 등 기본 스타일에 더해 애니메이션 지속 시간(animation-duration: 1s)과 채우기 모드(animation-fill-mode: both)를 지정합니다.
-webkit- 접두사는 Safari 등 구형 WebKit 기반 브라우저와의 호환성을 위해 사용됩니다.
.flash 클래스는 animation-name: flash;를 통해 정의된 키프레임을 실제 요소에 적용합니다.
"Reload page" 버튼을 클릭하면 페이지가 새로고침되어 애니메이션을 반복해서 확인할 수 있습니다.

활용 팁

플래시 효과는 알림, 경고 메시지, 새로운 콘텐츠 강조처럼 사용자의 주의를 끌어야 하는 요소에 유용합니다. 다만 과도하게 사용하면 오히려 시각적 피로를 줄 수 있으므로 적절히 활용하는 것이 좋습니다. 또한 prefers-reduced-motion 미디어 쿼리를 함께 사용하면 움직임에 민감한 사용자를 위해 애니메이션을 비활성화하는 접근성 친화적인 처리도 가능합니다.