在 CSS 中，transition 是用于实现元素样式平滑过渡的属性，能让元素从一种样式状态（如颜色、尺寸、位置等）逐渐变化到另一种状态，避免样式突变带来的生硬感。它是实现基础动画效果的核心工具，广泛用于 hover 交互、状态切换等场景。

一、transition 核心语法

transition 是一个复合属性，可以同时定义过渡的多个参数，语法如下：

css

transition: [过渡属性] [过渡时长] [过渡 timing 函数] [延迟时间];

各参数的含义和规则：

二、核心参数详解

1. 过渡属性（transition-property）

• 作用：指定哪些 CSS 属性发生变化时会触发过渡效果。
• 常见值：
  • all：所有可过渡的属性变化都触发（常用，但性能略差）。
  • 具体属性：如 width、height、background-color、transform 等（推荐按需指定，优化性能）。
• 注意：不是所有 CSS 属性都支持过渡，如 display（无法平滑过渡）、position 等，可过渡属性参考 MDN 列表。

2. 过渡时长（transition-duration）

• 作用：定义过渡效果从开始到结束的时间，必须设置（默认 0s，无过渡）。
• 单位：s（秒）或 ms（毫秒），如 0.5s 或 500ms。
• 示例：transition-duration: 0.3s 表示过渡持续 0.3 秒。

3. Timing 函数（transition-timing-function）

• 作用：控制过渡过程中的速度变化，决定动画的 “节奏”。
• 常用值：
  • ease（默认）：先慢 → 快 → 慢（适合大多数交互）。
  • linear：匀速（适合平移、旋转等均匀运动）。
  • ease-in：开始慢，逐渐加快（适合 “进入” 场景）。
  • ease-out：开始快，逐渐减慢（适合 “退出” 场景）。
  • ease-in-out：开始和结束都慢，中间快（对称效果）。
  • 贝塞尔曲线：cubic-bezier(x1, y1, x2, y2) 可自定义复杂曲线（如 cubic-bezier(0.25, 0.1, 0.25, 1)）。

4. 延迟时间（transition-delay）

• 作用：指定触发过渡后，延迟多久开始执行。
• 示例：transition-delay: 0.2s 表示触发后等待 0.2 秒再开始过渡。

三、使用场景与示例

1. 基础示例：按钮 hover 效果

实现按钮在 hover 时背景色、阴影、尺寸的平滑过渡：

  


  Hover 我

解析：

• 按钮默认状态定义了 transition: all 0.3s ease，表示所有样式变化都将在 0.3 秒内以 ease 曲线过渡。
• 当鼠标 hover 时，background、transform、box-shadow 同时变化，这些变化会被过渡效果 “平滑化”，而非瞬间切换。

3. 延迟过渡：实现序列动画

通过 transition-delay 让多个元素按顺序触发过渡，形成动画序列：

解析：

• 4 个圆点的过渡属性相同，但 transition-delay 依次增加 0.1s，当容器 hover 时，会按顺序逐个放大，形成 “波浪式” 动画。

4. 配合 transform 实现复杂动画

transition 与 transform（变形）结合是最常用的动画组合，可实现平移、旋转、缩放等效果：

  


  
Hover 我

解析：

• transform 同时实现 translateY（上移）和 scale（放大），transition 让这些变形平滑进行，配合阴影变化，模拟卡片 “浮起” 的立体感。

四、注意事项

1. 触发条件：transition 需要样式变化才能触发，常见触发方式：
   • 伪类：:hover、:active、:focus 等。
   • 类名变化：通过 JS 动态添加 / 移除类（如 element.classList.add('active')）。
   • 媒体查询：窗口大小变化触发样式调整。
2. 性能优化：
   • 优先过渡 transform 和 opacity，这两个属性不会触发浏览器的 “重排重绘”，性能更好。
   • 避免使用 transition: all（会监听所有属性变化，浪费性能），尽量指定具体属性（如 transition: width 0.3s）。
3. 兼容性：现代浏览器（Chrome、Firefox、Edge、Safari 10+）均支持，无需前缀；IE10 及以上部分支持，低版本 IE 不支持。
4. 局限性：transition 只能实现 “从 A 到 B” 的一次性过渡，无法实现循环动画或复杂时间线动画（这类需求需用 animation 属性）。

五、transition 与 animation 的区别

简单说：简单交互用 transition，复杂动画用 animation。

通过 transition，只需几行代码就能让元素交互变得生动流畅，是前端开发中提升用户体验的重要工具。掌握其参数组合和使用场景后，可轻松实现按钮反馈、卡片悬浮、菜单展开等常见交互效果。