[CSS] 떨리는 효과 구현하기

별도의 라이브러리 없이 간단한 코드로 진동처럼 흔들리는 애니메이션을 구현할 수 있습니다.

 

코드

반응형

코드 풀이

<div class="box vibration"></div>

떨림 효과를 줄 박스 요소를 하나 만들어줍니다.

 

.box {
  width: 150px;
  height: 150px;
  background: #febf00;
}

.box.vibration {
  animation: vibration 0.1s infinite;
}

박스 크기와 색깔 속성을 통해 시각화시켜주고, vibration 클래스가 포함된 박스에는 흔들리는 효과를 가진 애니메이션이 작동되도록 구현해줍니다.

 

@keyframes vibration {
  from {
    transform: rotate(1deg);
  }
  to {
    transform: rotate(-1deg);
  }
}

transform: rotate 속성을 이용한 미세한 회전을 0.1초 간격의 반복 애니메이션으로 마치 진동이 울리는 것과 같은 흔들리는 효과를 구현하였습니다.

 

JS를 사용한 응용

자바스크립트를 사용해서 박스를 클릭할 때, 짧게 동작되는 움직이는 애니메이션 기능을 구현해보았습니다.

 

<div class="box" onclick="vibration(this)"></div>

"박스를 클릭할 때"를 판단하기 위해서 onclick 이벤트를 넣어서 박스 요소를 생성해주었습니다.

 

const vibration = (target) => {
  target.classList.add("vibration");

  setTimeout(function() {
    target.classList.remove("vibration");
  }, 400);
}

클래스를 추가, 제거할 수 있는 add, remove 메서드를 이용해서, 클릭 시 vibration 클래스를 추가해주고 setTimeout 함수로 0.4초 딜레이를 줍니다. 그 후 해당 요소에 존재하는 vibration 클래스를 지워줌으로 진동 효과를 멈춰줍니다.