진동 애니메이션 구현하기

 진동하는 애니메이션을 만듭니다. 에러가 났을 경우 해당 애니메이션을 사용하여 사용자에게 에러를 쉽게 인지할 수 있도록 합니다.

진동 애니메이션 구현하기

 

목차

 

1. 기능 소개

2. 구현 방법

3. 구현된 코드로 보기

 

1. 기능 소개

• 의도치 않은 동작 시 사용자에게 이를 알리기 위해 시각적으로 눈에 띄는 애니메이션을 적용
• 입력한 정보가 적절하지 않거나, 오류 메시지 등을 나타낼 때 사용 가능

2. 구현 방법

• 회전, 역회전 애니메이션을 구현 후, 이를 반복

index.css

.modal {
  background: whitesmoke;
  position: absolute;
  width: 300px;
  height: 100px;
  border-radius: 8px;

  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  animation: vibration 0.1s 3;  
  // 적용 애니메이션, 적용 시간, 반복 횟수
}


// 2도 회전, 2도 역회전 애니메이션 반복하기
@keyframes vibration {
  from {
    transform: rotate(2deg);
  }

  to {
    transform: rotate(-2deg);
  }
}

3. 구현된 코드로 보기