如何解决iframe悬停时快速抖动、动画多次重复触发的问题

• 最核心的触发逻辑：:hover的状态判定是基于元素实际渲染的可交互命中区域，不是元素初始的矩形位置。当iframe执行旋转关键帧动画时，元素随transform倾斜转动，原本落在元素上的鼠标光标会因为元素旋转偏移，短暂脱离可交互范围。一旦光标脱离元素，:hover状态立刻失效，正在播放的旋转动画被强制终止；等元素回到0度的初始位置，光标又重新落在元素上，:hover再次激活、动画从头播放。这个「光标进元素→开动画旋转→光标脱元素→停动画回位→光标再进元素」的循环，就表现为肉眼可见的快速抖动、本来只播1次的动画被反复打断重开。
• 放大问题的次要诱因：当前代码写在iframe:hover里的transition: 0.5s ease-in-out;没有明确指定要过渡的具体属性，浏览器会默认给所有可变化的属性（包括transform）都绑上0.5s的缓动逻辑，和关键帧动画驱动的transform变化产生时序冲突，进一步加剧了动效错乱的抖动感。

• 零额外DOM的快速修正方案：
  1. 给transition明确划清过渡属性的范围，把transform排除在过渡列表外，避免和关键帧动画的旋转逻辑打架：

     iframe {
       box-shadow: 0 10px 18px 0 rgba(0, 0, 0, 0.144),
         0 12px 30px 0 rgba(0, 0, 0, 0.377);
       /* 仅给阴影、亮度变化做过渡，不干涉transform的旋转动画 */
       transition: box-shadow 0.5s ease-in-out, filter 0.5s ease-in-out;
     }
     

  2. 调整动画的触发逻辑，不要把动画完全绑定在:hover的持续状态上：可以在鼠标第一次进入元素时，给元素临时添加携带旋转动画的类，等动画按设定播完1次后自动移除类，哪怕后续鼠标因为元素旋转短暂脱离，也不会打断已经启动的动画播放，从机制上避免循环触发的问题。
• 从根源规避命中区偏移的方案：
  给iframe套一层和它尺寸完全一致的外层包裹容器，把所有的阴影、边框、悬停旋转动画都移到这个外层容器上，iframe作为内部子元素不做任何transform变形。这样不管外层容器怎么旋转，鼠标的悬停判定对象始终是外层容器，不会因为容器转动导致可交互区域和光标错位，也就不会出现hover状态反复进出的问题。

内容的提问来源于stack exchange，提问作者Uttkarsh's world m