为何两个CSS伪元素过渡不同步？如何解决该动画问题

嘿，这个问题我之前踩过类似的坑！当你把过渡时长拉到15s时能明显看到::before比::after先启动，本质是浏览器渲染队列的调度小问题——尤其是当过渡涉及触发重排的属性（比如你的width）时，浏览器可能会把两个伪元素的样式更新分到不同的渲染帧里执行，这种细微的差异在长时长过渡下就被放大了。

具体原因拆解 #

你的两个伪元素分别用right:100%和left:100%定位，它们的初始布局依赖于父元素.card-title的尺寸计算。当触发hover时，浏览器需要重新计算两个伪元素的宽度变化并更新布局，这个重排过程中，::before的布局计算可能因为依赖关系被优先调度，导致过渡启动稍早。

不用延迟的解决方案 #

方案1：用transform替代width实现过渡（最优解）

把宽度变化换成transform位移，因为transform属于合成层动画，不会触发重排，浏览器会用GPU高效处理，能保证两个伪元素的过渡完全同步。修改后的代码如下：

*, *::before, *::after { box-sizing: border-box; } 
body { display: grid; place-items: center; height: 100vh; background: #eee; } 
.card { height: 100px; width: 100px; } 
.card-body { color: white; height: 100%; background: #777; } 
.card-title { position: relative; background: yellow; height: 45px; } 

/* 修改伪元素样式 */
.card-title::before {
  content: '';
  position: absolute;
  background: red;
  width: 40px; /* 固定目标宽度 */
  top: 0;
  bottom: 0;
  right: 0; /* 初始贴在父元素右边缘 */
  transform: translateX(100%); /* 向右移出视野，视觉上宽度为0 */
  z-index: -1;
  transition: transform 15s linear;
} 
.card-title::after {
  content: '';
  position: absolute;
  background: red;
  width: 40px; /* 固定目标宽度 */
  top: 0;
  bottom: 0;
  left: 0; /* 初始贴在父元素左边缘 */
  transform: translateX(-100%); /* 向左移出视野，视觉上宽度为0 */
  z-index: -1;
  transition: transform 15s linear;
} 

/* Hover时触发位移回原位 */
.card-body:hover .card-title::before {
  transform: translateX(0);
}
.card-body:hover .card-title::after {
  transform: translateX(0);
}

方案2：用CSS变量统一控制宽度（纯width过渡的兼容方案）

如果你坚持要用width过渡，可以通过父元素的CSS变量统一控制两个伪元素的宽度，让浏览器一次性处理样式更新，减少渲染队列的调度差异：

*, *::before, *::after { box-sizing: border-box; } 
body { display: grid; place-items: center; height: 100vh; background: #eee; } 
.card { height: 100px; width: 100px; } 
.card-body { color: white; height: 100%; background: #777; } 
.card-title { 
  position: relative; 
  background: yellow; 
  height: 45px;
  --expand-width: 0; /* 定义变量默认值 */
} 

.card-title::before {
  content: '';
  position: absolute;
  background: red;
  width: var(--expand-width);
  top: 0;
  bottom: 0;
  right: 100%;
  z-index: -1;
  transition: width 15s linear;
} 
.card-title::after {
  content: '';
  position: absolute;
  background: red;
  width: var(--expand-width);
  top: 0;
  bottom: 0;
  left: 100%;
  z-index: -1;
  transition: width 15s linear;
} 

/* Hover时修改父元素变量，同时影响两个伪元素 */
.card-body:hover .card-title {
  --expand-width: 40px;
}

这个方法通过单个变量的变化触发两个伪元素的宽度更新，浏览器会把这两个样式更新合并到同一个渲染帧，从而避免先后差异。

内容的提问来源于stack exchange，提问作者Jos van Weesel