CSS过渡与动画怎么用？transition和keyframes技巧

CSS中的transition和@keyframes虽都用于实现视觉动效，但机制独立、职责不同：transition适合轻量级交互反馈（如悬停渐变），而@keyframes专精于多阶段、高精度的复杂动画（如弹跳入场或路径位移）；二者若混用同一属性将引发卡顿、跳变甚至动画失效，关键在于严格分工——用不同属性各司其职、避免运行时篡改被animation接管的样式，并善用animation-fill-mode、延迟触发和硬件加速等技巧保障流畅性与兼容性，最终让动效既精准又丝滑。

transition 和 @keyframes 不能混用同一个属性

很多人试图这样写：transition: all 0.3s，同时又用 @keyframes 动画控制 transform 或 opacity，结果发现动画卡顿、跳变，或者 keyframes 根本不触发。这是因为 transition 和 @keyframes 是两套独立的动画机制，浏览器不会自动协调它们对同一属性的控制权。

• transition 只响应属性值的「变化」（比如 class 切换、:hover、JS 修改 style），且只做起点→终点的插值
• @keyframes 是声明式时间轴，由 animation 属性主动触发，完全接管该属性在动画周期内的所有中间状态
• 如果一个元素同时被 transition 和 animation 修改同一个 CSS 属性（如 transform），后者优先级更高，但过渡可能被中断或产生冲突

想让 transition 和 keyframes 协同工作，必须分责

常见可靠做法是：用 transition 处理「交互反馈类」简单变化（比如 hover 时背景色渐变、边框粗细微调），用 @keyframes + animation 处理「有节奏、多阶段、需精确控制」的动效（比如弹跳入场、路径位移、循环旋转）。

• 给不同属性分工：比如 transition 控制 background-color，animation 控制 transform
• 避免在动画运行中动态修改被 animation 占用的属性（例如 JS 直接改 element.style.transform），否则会覆盖动画效果
• 若需在动画结束后保持最终状态，务必加 animation-fill-mode: forwards

transition 触发后立即播放 keyframes 的典型写法

典型场景：点击按钮 → 先有个过渡缩放（transition），再执行一段入场动画（keyframes）。关键在于用 class 分离两个阶段，靠 JS 或伪类顺序触发。

.btn {
  transform: scale(1);
  transition: transform 0.2s ease;
}
.btn.animating {
  transform: scale(0.95); /* 过渡起点 */
  animation: popIn 0.4s ease-out 0.2s forwards; /* 延迟 0.2s 后启动 keyframes */
}
@keyframes popIn {
  0% { transform: scale(0.95); }
  70% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

• 第一次 class 切换（加 .animating）触发 transition 缩放至 0.95
• animation-delay: 0.2s 确保它等过渡结束才开始
• animation-fill-mode: forwards 保证动画停在 scale(1)，不回退
• 注意：不要在 @keyframes 里再写 transition，无效

容易被忽略的兼容性与重绘陷阱

即使语法正确，动画也可能掉帧或闪烁，尤其在移动端。根本原因常是浏览器被迫进行昂贵的 layout 或 paint，而非利用 GPU 加速的 composite。

• 只对能触发硬件加速的属性做动画：优先用 transform 和 opacity；避免动画 width、height、left、top 等会触发布局计算的属性
• 强制开启 GPU 加速：在动画元素上加 transform: translateZ(0) 或 will-change: transform（但别滥用，will-change 本身有开销）
• transition 的 ease 类函数（如 cubic-bezier(.25,.46,.45,.94)）和 @keyframes 中的 animation-timing-function 行为一致，但后者可逐帧定义，更灵活

真正难的是判断哪段交互动效该用 transition、哪段该拆成 keyframes——这取决于是否需要中间状态控制、是否要循环、是否依赖 JS 动态参数。写完记得在真机上点几次，看有没有卡顿或意外回退。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS过渡与动画怎么用？transition和keyframes技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。