[css] html 요소 깜빡거리게 만들기

html 요소에 깜빡거리는 효과를 주고 싶을 때 어떻게 해야할까요?

 

아래와 같은 코드를 css에 추가한 다음에, 깜빡거렸으면 하는 요소에 blinking이라는 클래스를 적용해주면 됩니다. blinking이라는 클래스를 부여받은 요소들의 투명도(opacity)를 0에서 1로 0.5초마다 바뀌게 하는 코드라고 볼 수 있습니다.  

 

.blinking{
  -webkit-animation: blink 0.5s ease-in-out infinite alternate;
  -moz-animation: blink 0.5s ease-in-out infinite alternate;
  animation: blink 0.5s ease-in-out infinite alternate;
}

@-webkit-keyframes blink{
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@-moz-keyframes blink{
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes blink{
  0% {opacity: 0;}
  100% {opacity: 1;}
}

 

test라는 아이디를 갖고 있는 요소를 깜빡거리게 해보겠습니다. 

 

<div id="test" class="blinking">
</div>

 

 

보시다시피 잘 깜빡거리죠?