vue项目添加animation动画-抖动效果案例

vue项目添加animation动画效果，如下图所示

主要代码如下：

<div class="lo-main" :class="[sharkFlag ?'my-shark' :'']" id="myShark"></div>

mounted() {
  setTimeout(()=>{
    this.sharkFlag = true;
  },2000)
  const sharkDiv = document.getElementById("myShark");
  sharkDiv.addEventListener("animationend", this.stopShark);
  //sharkDiv.addEventListener("webkitAnimationEnd", this.stopShark);
},

.my-shark{
  animation:login-shake 0.8s 1 ease-in;
}
@keyframes login-shake {
  0% {transform: scale(1);}
  10%, 20% {transform: scale(0.9) rotate(-3deg);}
  30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
  40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
  100% {transform: scale(1) rotate(0);}
}