含动画时Hover元素闪烁问题求助

问题场景 #

实现Hover导航功能时，原本运行正常，添加涉及位移/尺寸变化的动画后，Hover元素出现闪烁现象，移除动画后功能恢复正常。

原问题代码 #

CSS代码

.hide {
  display: none;
}

.hover {
  position: absolute;
  display: block;
  width: 200px;
  height: 200px;
  background: grey;
}

.hover:hover+.hide {
  display: inline-block;
  background: #fff;
  position: absolute;
}

@keyframes animation {
  0% {
    font-size: 14px;
  }
  100% {
    font-size: 15px;
  }
}

.animationexample {
  animation: animation 1s infinite;
  position: absolute;
  top: 0;
  right: 0;
}

HTML代码

<p class="animationexample">Animation</p>

<p class="hover">
  Hover over this
  <p class="hide">Now hover over this</p>
</p>

问题原因 #

1. 动画触发频繁重排：原动画修改font-size会导致元素尺寸变化，触发浏览器重排（reflow）。浏览器在处理动画帧和hover事件时，布局的频繁变化会导致hover状态被误判，引发元素闪烁。
2. HTML结构不规范：p标签属于块级元素，不能嵌套其他块级元素（如内部的p标签），不符合HTML规范，会导致浏览器渲染异常，加重闪烁问题。

解决方案 #

1. 修复HTML结构 #

将嵌套的p标签替换为div，避免结构错误：

<p class="animationexample">Animation</p>

<div class="hover">
  Hover over this
  <div class="hide">Now hover over this</div>
</div>

2. 优化动画，避免重排 #

使用transform: scale()代替修改font-size，transform属于合成属性，由GPU加速处理，不会触发重排：

@keyframes animation {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.07); /* 对应font-size从14到15的缩放比例 */
  }
}

.animationexample {
  animation: animation 1s infinite alternate;
  position: absolute;
  top: 0;
  right: 0;
  /* 可选：添加will-change提示浏览器提前优化 */
  will-change: transform;
}

3. 隔离动画元素的事件干扰 #

如果需要保留原动画逻辑，可给动画元素添加pointer-events: none，避免其干扰hover事件的判断：

.animationexample {
  animation: animation 1s infinite;
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
}

修改后完整代码 #

CSS

.hide {
  display: none;
}

.hover {
  position: absolute;
  display: block;
  width: 200px;
  height: 200px;
  background: grey;
}

.hover:hover .hide {
  display: inline-block;
  background: #fff;
  position: absolute;
  top: 50px;
  left: 0;
}

@keyframes animation {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.07);
  }
}

.animationexample {
  animation: animation 1s infinite alternate;
  position: absolute;
  top: 0;
  right: 0;
  will-change: transform;
}

HTML

<p class="animationexample">Animation</p>

<div class="hover">
  Hover over this
  <div class="hide">Now hover over this</div>
</div>

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