嘿，我帮你分析了这个动画突然左偏移抖动的问题，核心是**浏览器布局重排（Reflow）**加上inline元素的基线对齐特性在搞事情，具体拆解下：

为啥会抖？ #

1. inline元素的基线坑
   你给i.icon-fold设了display: inline（或者inline-block），这类元素默认是基线对齐的。当箭头的两个伪元素在动画里变换时，元素的基线位置会悄悄变化，导致整个图标瞬间偏移。

2. 动画没用到浏览器的最优渲染路径
   如果你的动画关键帧里用了top/left/margin这类会修改布局的属性，而不是只靠transform和opacity，浏览器每帧都得重新计算布局，自然会出现抖动。哪怕用了transform，没给元素开启硬件加速的话，也可能出现瞬间偏移的情况。

3. 初始状态和动画起始帧不匹配
   要是伪元素的初始样式和动画第一帧（0%）的属性不一样，浏览器启动动画时会突然“修正”样式，这就表现成了那一下突兀的偏移。

怎么修复？ #

给你几个针对性的解决办法：

• 先把元素的对齐方式搞定
  把i.icon-fold改成inline-block或者block，再重置对齐方式，避免基线捣乱：

  i.icon-fold {
    position: relative;
    display: inline-block;
    vertical-align: middle; /* 脱离基线对齐 */
    width: 1em; /* 固定宽高，防止布局变来变去 */
    height: 1em;
  }
  

• 开硬件加速让动画丝滑
  用will-change或者transform: translateZ(0)给元素单独开个合成层，让GPU来渲染动画，彻底避免重排：

  i.icon-fold {
    will-change: transform;
    /* 老浏览器可以用这个备选方案 */
    transform: translateZ(0);
  }
  

• 让初始状态和动画起始帧完全一致
  检查你的@keyframes，确保0%关键帧的属性和伪元素的初始样式一模一样。比如伪元素初始是transform: rotate(0deg)，动画0%也得是这个值，别让浏览器瞎“修正”。

• 只拿transform和opacity做动画
  把动画里的位置变换全换成transform（比如translate、rotate），别用top/left这些会触发重排的属性——这是浏览器动画性能优化的黄金准则。

内容的提问来源于stack exchange，提问作者Erwin van Lun