CSS - 깜빡이는 효과 [Blink Effect]

 CSS의 애니메이션을 사용해서 HTML의 blink 태그처럼 깜빡이는 효과를 만드는 방법을 알아보겠습니다. HTML의 blink 태그는 더 이상 지원을 하지 않는 방법이니 혹시라도 사용하고 계시거나 사용할 예정이라면 CSS의 애니메이션을 사용하시는 게 더 좋은 방법입니다.

커서처럼 깜빡이는 효과 만들기 - Blink Effect

@keyframes blink-effect {
  50% {
    opacity: 0;
  }
}

.blink {
  animation: blink-effect 1s step-end infinite;

  /*
  animation-name: blink-effect;
  animation-duration: 1s;
  animation-iteration-count:infinite;
  animation-timing-function:step-end;
  */
}

 깜빡이는 애니메이션 효과를 만드는 방법은 CSS의 animation-timing-function을 사용하면 쉽게 만들 수 있습니다. 먼저 화면에 표시되는 효과를 정의하기 위해 opacity를 설정하는 blink-effect 이름으로 @keyfraems를 정의합니다. animation 구문에 blink-effect를 사용해 애니메이션의 세부 옵션을 설정합니다. 이때 animation-timing-function의 값을 step-start, step-end로 설정합니다. 그리고 반짝임 효과가 필요한 화면 요소에 적용하면 됩니다.

깜빡이는 효과 - Blink Effect

 animation-timing-function은 애니메이션 효과의 동작을 맞추는 일을 정의합니다. 글로 보는 것보다는 동작하는 코드를 예시로 보여드리는 게 좋을 것 같아 예시 그림을 보여드리겠습니다.

animation-timing-function

animation-timing-function을 이용하면 재미있는 애니메이션을 만들 수 있는데요. 이 부분은 나중에 다른 글을 통해서 다뤄보도록 하겠습니다.

 

 

실습해보기

See the Pen CSS - Blink Effect by yongdae (@yongdae) on CodePen.

 

 위에서 예시로 작성한 코드를 이용해 작성한 실습 코드입니다. CSS를 통해 깜빡임 효과를 만드는 방법은 여기서 제시한 방법 외에도 많은 방법이 있지만 animation-timing-function을 잘 활용하는 것만큼 쉽고 간편하게 만드는 방법은 없다고 생각합니다.

 

아래의 링크는 이전에 깜빡이는 효과를 적용했던 예제 코드입니다. 화면에서 커서가 깜빡이는 효과에도 사용할 수 있지만 시간을 표시할 때도 사용할 수 있습니다.

Javascript - Date 시계 만들기