HTML/CSS 고동치는 효과 - CSS keyframes 애니메이션

버튼이 고동치는 것 같은 효과를 HTML과 CSS를 이용해서 구현해 봤다. 이런 게 대체 어디에 쓰일까 싶지만 예전에 HTML로 시연하는 프로그램을 만들다가 버튼을 강조할 필요가 있었는데, 이렇게라도 강조를 해볼까 하고 만들었던 애니메이션이다. 

 

네모

  

동그라미

 

 

CSS - 애니메이션과 스타일

CSS에서는 keyframes 가 핵심이다. 시간이 지남에 따라 투명도가 낮아지고 마지막에 scale을 크게 해서 고동치는 것 같은 효과를 주면 된다. webkit과 moz 둘 다 작성.

@-webkit-keyframes pulse {       
  0% {-webkit-transform: scale(0); opacity: 0;}
  8% {-webkit-transform: scale(0); opacity: 0;}
  15% {-webkit-transform: scale(0.1); opacity: 1;}
  30% {-webkit-transform: scale(0.5); opacity: 1;}
  100% {opacity: 0; -webkit-transform: scale(1.5);}
}
@-moz-keyframes pulse {       
  0% {-webkit-transform: scale(0); opacity: 0;}
  8% {-webkit-transform: scale(0); opacity: 0;}
  15% {-webkit-transform: scale(0.1); opacity: 1;}
  30% {-webkit-transform: scale(0.5); opacity: 1;}
  100% {opacity: 0; -webkit-transform: scale(1.5);}
}

 

그리고 네모와 동그라미 객체에 적용할 스타일을 지정하고 위에서 만든 keyframe을 적용하면 된다.

 

.pulse_box {
	margin: 0 auto;
	position: absolute;
	z-index: 0;
	border-radius: 5px;
	background-color: firebrick;
	opacity: 0;
	width: 150px;
	height: 150px;
	border: none;
	-webkit-animation: pulse 1s linear infinite 0.3s;
	-moz-animation: pulse 1s linear infinite 0.3s;
	border-image: initial;
}

.pulse_circle {
	margin: 0 auto;
	border-radius: 100px;
	position: absolute;
	z-index: 0;
	background-color: firebrick;
	opacity: 0;
	width: 100px;
	height: 100px;
	border: none;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	-o-border-radius: 100px;
	-ms-border-radius: 100px;
	border-radius: 100px;
	-webkit-animation: pulse 1s linear infinite 0.3s;
	-moz-animation: pulse 1s linear infinite 0.3s;
	border-image: initial;
}

 

반응형

 

HTML - 네모

<div style="height: 300px; border: 1px solid #ccc; border-radius: 10px; display: flex; align-items: center; justify-content: center; width: 300px;">

    <div style="background:firebrick; z-index: 2;display: flex; justify-content: center; align-items: center; width: 150px; height: 150px; box-shadow: rgba(0, 0, 0, 0.5) 0px 7px 29px 0px;">
        <div style="font-weight: bold;color:white;">네모</div>
    </div>
    <span class="pulse_box"></span>

</div>

 

 

HTML - 동그라미

<div style="height: 300px; border: 1px solid #ccc; border-radius: 10px; display: flex; align-items: center; justify-content: center; width: 300px;">
    <div style="background:firebrick; z-index: 2;display: flex; justify-content: center; align-items: center; width: 100px; height: 100px; box-shadow: rgba(0, 0, 0, 0.5) 0px 7px 29px 0px;border-radius: 100px;">
        <div style="font-weight: bold;color:white;">동그라미</div>
    </div>
    <span class="pulse_circle"></span>
</div>

 

z-index로 효과를 적용할 레이어의 순서를 조정해서 네모나 동그라미뒤에서 효과가 나도록 해야 이상하지 않다. 

 

네모와 동그라미의 쉐도우라던지 크기, 색상 등은 상황에 맞게 변경해서 사용하면 끝!