CSS实现消息通知时铃铛图标显示摇铃效果

1. 代码如下

<image class="xiaoxi-icon" src="../../static/icons/xiaoxi.png" 
:class="{'rotate':isPlaying}"></image>

.rotate {
  display: block;
  animation: rotate 0.1s linear infinite;
}
  
@keyframes rotate{
  0%{
    transform: rotateZ(0deg);/*从0度开始*/
  }
  25%{
    transform: rotateZ(20deg);
  }
  50%{
    transform: rotateZ(0deg);
  }
  75%{
    transform: rotateZ(-20deg);
  }
  100%{
    transform: rotateZ(0deg);
  }
}