何必呢？ 在前端开发里 时常会碰到一个问题——CSS 更多状态过渡乱七八糟，引起动画看起来不连贯或者根本没有动画。如果你也遇到当前这个麻烦， 那么这篇文章有可能会帮你把全部的 transition 集中到一块儿，让页面看起来更顺滑。

先说个经验：推荐按粒度从紧到松排列：

先写最十分沉关键的几个属性，然后再写可选的。

常见表现：

• :hover 进入有动画， 鼠标移开瞬间“啪”一下弹回去；或者更多个不同伪类各自写 transition引起不同状态间切换时过渡参数不一致、冲突。
• .btn:hover{transform:scale;}
• .btn.active{transform:none;}

统一定义不是只写一行 transition: all 0.3s ease— 那会把全部可动画属性都卷进来简单引发意外动画。真实正要收口的是「你实际想控制的那几个属性」。

.btn {
  background-color: #ccc;
  transition: background-color 0.2s ease,
               transform        0.25s ease;
}
.btn.active{
   background-color:#007bff;
   transform:scale;
}

更多状态共存时transition还能稳住吗？

能，但前提是全部状态变更都落在同一套 transition 定义下。CSS 会自动匹配「起始值 → 目标值」之间的插值路径， 只要属性可动画、且 transition 声明平稳，浏览器就自己算。

注意：

解决方式很直接：

1. 这是因为只在 :hover 规则中定义了 transition ， 离开时浏览器找不到过渡依据，直接跳变回原始样式。CSS 过渡必须要作用于「状态改变的起点和终点都存在的属性」， 而起点没声明 transition ，就等于告诉浏览器：“当前这个改变不用过渡”。
2. 典型现象：JS 给元素加了 is-active 类， 但没动画；或动画只触发一次之后再切就没反应。根本原因是浏览器没“感知到样式改变起点”—— 它以为崭新陈旧状态之间没有过渡定义， 这是因为 class 切换前后transition 的声明位置或值发生了断裂。
3. 简单翻车的点：①在 hover 后立刻取消 hover；②同一个元素上有更多个不同伪类同时也触发；③用!important 把 transition 覆盖掉了等等。

一步一步把 transition 收进基础选择器里

/* 基础按钮 */
.btn {
    display:inline-block;
    padding:.8rem .9rem;
    color:#fff;
    background:#333;
    border:none;
    cursor:pointer;
    /* 收集全部需要动画的属性 */
    transition:
        background-color .25s ease,
        transform          .15s cubic-bezier,
        opacity           .15s ease-in-out,
        box-shadow        .25s ease
}
/* 鼠标悬停 */
.btn:hover {
    background:#444;
    transform:scale;
}
/* 激活态*/
.btn.active{
    background:#0066cc;
    transform:scale;
}
/* 禁用态 */
.btn.disabled{
    opacity:.5;
}

开搞。 注：如果你看到这里有些语法错误， 也不要紧——这正良好说明我是一个刚启动学 CSS 的人，用的是最原始、最粗糙的方法。

常见 bug & 调试技巧

在 Chrome DevTools 中打开“Elements”面板，看一下元素上到底有没有 transition 属性被继承。如果没有，那说明你遗忘放在基础选择器里啦！ 把 !important 放进来试试看， 如果能让 animation 工作岗位， 我心态崩了。 那说明之前被覆盖掉了。 用 console.log 检查 JS 有没有真实的给元素添加了 class，并且时间段上与 CSS 有衔接。 如果页面里还有其他脚本操作 DOM，请确保它们不会意外地把 `