如何实现图片鼠标悬浮震动及每5秒自动震动效果？

嘿，我来帮你搞定这个问题！你遇到的震动失效问题主要有两个原因：一是原来的自动动画只执行一次，没法实现每5秒震动一次的效果；二是你给自动动画加了-webkit-前缀，但hover状态的动画没加，在部分浏览器里会导致前缀动画优先级更高，hover效果被覆盖。

下面是修改后的完整代码，完美实现鼠标悬浮时震动+每5秒自动震动一次的效果：

CSS 代码 #

/* 基础样式：优化动画性能 */
.opona {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  /* 自动震动：每5秒触发一次，无限循环 */
  animation: auto-shake 5s infinite;
}

/* hover时触发震动：覆盖当前自动动画周期，结束后回到自动循环 */
.opona:hover {
  animation: hover-shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
}

/* 自动震动关键帧：前4.18秒静止，最后0.82秒执行震动 */
@keyframes auto-shake {
  0%, 83.6% {
    transform: translate3d(0, 0, 0);
  }
  84.6% { transform: translate3d(-1px, 0, 0); }
  86.24% { transform: translate3d(2px, 0, 0); }
  87.88% { transform: translate3d(-4px, 0, 0); }
  89.52% { transform: translate3d(4px, 0, 0); }
  91.16% { transform: translate3d(-4px, 0, 0); }
  92.8% { transform: translate3d(4px, 0, 0); }
  94.44% { transform: translate3d(-4px, 0, 0); }
  96.08% { transform: translate3d(2px, 0, 0); }
  97.72% { transform: translate3d(-1px, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* hover震动关键帧：快速完成震动效果 */
@keyframes hover-shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

HTML 代码 #

<div class="opona">
  <img src="https://www.firestonetire.com/content/dam/bridgestone/consumer/fst/tire-images/Firehawk%20AS/FST_Firehawk_AS.jpg/_jcr_content/renditions/original" alt="" width="50px">
</div>

代码说明 #

1. 自动震动：通过auto-shake关键帧实现每5秒震动一次——前4.18秒保持静止，最后0.82秒执行震动动作，配合infinite让动画无限循环。
2. hover震动：单独定义hover-shake关键帧，hover时触发快速震动，both关键字让动画结束后保持元素的初始状态，hover结束后自动回到循环的自动震动。
3. 性能优化：添加backface-visibility和perspective属性，避免动画过程中出现卡顿。

内容的提问来源于stack exchange，提问作者Adam Kowalski