bell shake 애니메이션 예제

안녕하세요. 루루개발자 입니다.

 

최근 회사에서 관리자 페이지 프론트를 개발하고 있는데

알림 모양의 아이콘에 마우스를 올리면

흔들리는 효과가 있었으면 좋겠다는 의견을 접수하여,

이번 시간에는 bell 이 흔들리는 모양의 css 애니메이션 예제를 살펴보려 합니다.

 

예제는 다음과 같습니다.

 

<bell-shake.html>

<div class="bell-icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="60" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 32V51.2C329 66.03 384 130.6 384 208V226.8C384 273.9 401.3 319.2 432.5 354.4L439.9 362.7C448.3 372.2 450.4 385.6 445.2 397.1C440 408.6 428.6 416 416 416H32C19.4 416 7.971 408.6 2.809 397.1C-2.353 385.6-.2883 372.2 8.084 362.7L15.5 354.4C46.74 319.2 64 273.9 64 226.8V208C64 130.6 118.1 66.03 192 51.2V32C192 14.33 206.3 0 224 0C241.7 0 256 14.33 256 32H256zM224 512C207 512 190.7 505.3 178.7 493.3C166.7 481.3 160 464.1 160 448H288C288 464.1 281.3 481.3 269.3 493.3C257.3 505.3 240.1 512 224 512z"/></svg>
</div>

 

<bell-shake.css>

.bell-icon {
  display: inline-flex;
  position: relative;

  -webkit-animation: ring 2s .7s ease-in-out infinite;
  -webkit-transform-origin: 50% 4px;
  -moz-animation: ring 2s .7s ease-in-out infinite;
  -moz-transform-origin: 50% 4px;
  animation: ring 2s .7s ease-in-out infinite;
  transform-origin: 50% 4px;
}

@keyframes ring {
  0% { -webkit-transform: rotateZ(0); }
  1% { -webkit-transform: rotateZ(10deg); }
  10% { -webkit-transform: rotateZ(-8deg); }
  19% { -webkit-transform: rotateZ(8deg); }
  28% { -webkit-transform: rotateZ(-6deg); }
  37% { -webkit-transform: rotateZ(6deg); }
  46% { -webkit-transform: rotateZ(-4deg); }
  55% { -webkit-transform: rotateZ(4deg); }
  64% { -webkit-transform: rotateZ(-2deg); }
  73% { -webkit-transform: rotateZ(1deg); }
  82% { -webkit-transform: rotateZ(-1deg); }
  100% { -webkit-transform: rotateZ(0); }
}

 

결과는 다음과 같습니다.

 

 

 

 

<참고>

https://codepen.io/Mrshcom/pen/kNmBGm

Ringing Bell Animation