为何两个CSS keyframe动画表现一致？求助排查

核心排查方向 #

从你描述的“类已正确添加、修改动画时长有差异”的情况来看，问题基本锁定在CSS关键帧（keyframes）的定义错误或缓存/样式覆盖上，以下是具体排查点：

1. 检查关键帧的属性值是否写错

这是最常见的原因：你可能不小心把EnterFromRight的初始位置写成了和EnterFromLeft一致的左偏移。

正确的关键帧定义应该是：

/* 从左侧淡入 */
@keyframes EnterFromLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 从右侧淡入 */
@keyframes EnterFromRight {
  from {
    opacity: 0;
    transform: translateX(100%); /* 这里必须是向右的偏移，不能写成-100% */
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

如果EnterFromRight的from里transform值也是-100%，两个动画自然会表现一致。

2. 排查CSS样式覆盖问题

打开浏览器开发者工具（F12），选中有动画的元素，查看Styles面板：

• 确认animation-name属性是否正确对应到EnterFromLeft/EnterFromRight
• 检查是否有其他CSS规则（比如父元素的transform、全局*选择器的样式）覆盖了动画的transform属性

3. 清除浏览器缓存

克隆项目后，浏览器可能缓存了旧的CSS文件，导致新的关键帧代码没有生效。可以：

• 强制刷新页面（Windows：Ctrl+Shift+R；Mac：Cmd+Shift+R）
• 打开开发者工具的Network面板，勾选「Disable cache」后重新加载页面

4. 二次验证JS的类添加逻辑

虽然你说类已正确添加，但可以再快速核对：

• JS代码中类名拼写是否正确（比如有没有把EnterFromRight误写为EnterFromLeft）
• 通过开发者工具的Elements面板，确认对应元素的class属性确实分别包含两个不同的动画类

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