CSS3 的 transition 属性是实现元素样式平滑过渡的核心特性，它允许元素在状态变化时 （如 hover、focus 等） 以动画形式从一个样式值过渡到另一个，无需 JavaScript 即可实现基础动画效果；
transition 基本语法
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
transition-property: /* 过渡属性 */;
transition-duration: /* 过渡时长 */;
transition-timing-function: /* 过渡速度曲线 */;
transition-delay: /* 过渡延迟 */;
各子属性详解
| 属性 | 描述 |
|---|---|
| transition-property | 1. 设置对象中的参与过渡的属性，默认值为：all 为所有可以进行过渡的 css 属性 2. 如果提供多个属性值，以逗号进行分隔 |
| transition-duration | 1. 设置对象过渡的持续时间 （如 0.5s、300ms），默认值：0 2. 如果提供多个属性值，以逗号进行分隔 |
| transition-timing-function | 1. 检索或设置对象中过渡的动画类型，默认值：ease；如果提供多个属性值，以逗号进行分隔 2. linear：匀速 （cubic-bezier(0, 0, 1, 1)） 3. ease：默认值，先慢→快→慢 （cubic-bezier(0.25, 0.1, 0.25, 1)） 4. ease-in：先慢后快 （cubic-bezier(0.42, 0, 1, 1)） 5. ease-out：先快后慢 （cubic-bezier(0, 0, 0.58, 1)） 6. ease-in-out：先慢→快→再慢 （cubic-bezier(0.42, 0, 0.58, 1)） 7. step-start：分步过渡 （如 steps(5) 表示分 5 步完成） 等同于 steps(1, start) 8. step-end：等同于 steps(1, end) |
| transition-delay | 1. 设置对象延迟过渡的时间，以 s 或 ms 为单位的数值，默认值：0 2. 如果提供多个属性值，以逗号进行分隔 |
多个元素过渡
-
如果要对多个 CSS3 属性应用过渡效果，直接用逗号分离开即可，这种主要是针对每个属性过渡的时间不同的情况下；
-
例如下面的例子：背景颜色过渡时间为 2s ，而宽度的过渡时间为 5s：
div { width: 100px; height: 100px; background-color: skyblue; transition: background-color 2s, height 5s; } div:hover{ height: 300px; background-color: pink; } -
当然，如果每个属性的过渡时间都一样的话，那么直接使用 all 会更简洁一些；
可过渡的 CSS 属性
-
并非所有属性都支持过渡，常见支持的属性包括：
- 盒模型：width、height、margin、padding、border-width 等；
- 视觉样式：color、background-color、opacity、border-color 等；
- 变换：transform （如 scale、translate、rotate）；
- 位置：top、left （需配合 position 使用）；
- 其他：font-size、line-height、clip-path 等；
-
注意：display、visibility （部分情况）、position （类型切换） 等属性不支持过渡，如需隐藏 / 显示过渡，可结合 opacity 和 height 实现；
触发过渡的方式
-
伪类触发：hover、focus、active、checked （如复选框）；.box { width: 100px; transition: width 0.3s; } .box:hover { width: 200px; } -
类名切换：通过 JavaScript 添加 / 移除类；.box { width: 100px; transition: width 0.3s; } .box.active { width: 200px; }document.querySelector('.box').classList.add('active'); -
媒体查询触发：响应式布局中的状态变化；.box { width: 100px; transition: width 0.3s; } @media (min-width: 768px) { .box { width: 200px; } }
高级用法与技巧
-
配合 transform 实现高性能动画：transform 属性由 GPU 加速，过渡更流畅，避免使用 top/left 等属性 （易导致重排）
.box { transition: transform 0.3s ease; } .box:hover { transform: translateX(50px) scale(1.2); /* 平移+缩放 */ } -
过渡结束事件 transitionend
const box = document.querySelector('.box'); box.addEventListener('transitionend', (e) => { console.log(`过渡完成：${e.propertyName}`); // 输出过渡的属性名 }); -
反向过渡：过渡默认支持反向触发 （如 hover 移出时恢复原样式），无需额外设置
注意事项
-
初始值与目标值：过渡需要属性有明确的初始值和目标值，否则可能无效 （如初始值为 auto 时，width 过渡可能失效）；
-
性能优化：优先使用 transform 和 opacity 过渡，避免触发频繁重排 （如 width/height 过渡）；
-
兼容性：IE10+、Chrome、Firefox、Safari 均支持 transition，无需前缀 （老版本 Safari/Chrome 曾需 -webkit- 前缀）；
-
过渡与动画的区别：transition 是 “状态切换动画” （需触发），而 @keyframes 动画可实现更复杂的循环动画；
过渡动画案例
CSS 高级✍️ CSS3 的媒介 (media) 查询
上一篇
