CSS 实现图标左右晃动动画。模仿Steam端通知铃铛摆动动画

/* 设置动画关键帧 */
@keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(10deg);
  }
  20% {
    transform: rotate(-10deg);
  }
  30% {
    transform: rotate(10deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(-10deg);
  }
  70% {
    transform: rotate(10deg);
  }
  80% {
    transform: rotate(-10deg);
  }
  90% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
 
/* 应用动画至图标 */
.icon-swing {
  animation: swing 1s infinite alternate;
}

这段代码定义了一个名为swing的关键帧动画，它会让图标旋转来回。然后，.icon-swing类将这个动画应用于需要该动画的图标元素。通过animation属性设置动画无限次数循环、交替播放（alternate），使得动画有起伏的效果。