如何用SCSS制作小铃铛振动/震动/摇晃/晃动的特效/效果？

 
// 摇晃小铃铛振动/震动/摇晃/晃动的特效/效果----------------------------------------
[sg-shaking] {
  display: inline-block;
  transform-origin: center top;
  animation: sg-shaking 1s alternate forwards;
}
 
@keyframes sg-shaking {
  10% {
    transform: translate(.125rem, -0.125rem) rotate(0deg) scale(1);
  }
 
  15% {
    transform: translate(-0.125rem, -0.125rem) rotate(-40deg) scale(1);
  }
 
  25% {
    transform: translate(.0625rem, -0.0625rem) rotate(30deg) scale(1.1);
  }
 
  40% {
    transform: translate(.125rem, -0.125rem) rotate(-20deg) scale(1.2);
  }
 
  55% {
    transform: translate(-0.125rem, -0.125rem) rotate(15deg) scale(1.3);
  }
 
  70% {
    transform: translate(.0625rem, -0.0625rem) rotate(-10deg) scale(1.2);
  }
 
  85% {
    transform: translate(0rem, 0rem) rotate(5deg) scale(1);
  }
 
  100% {
    transform: translate(0rem, 0rem) rotate(0deg) scale(1);
  }
}
// ----------------------------------------