在 CSS 中,transition
是用于实现元素样式平滑过渡的属性,能让元素从一种样式状态(如颜色、尺寸、位置等)逐渐变化到另一种状态,避免样式突变带来的生硬感。它是实现基础动画效果的核心工具,广泛用于 hover 交互、状态切换等场景。
一、transition
核心语法
transition
是一个复合属性,可以同时定义过渡的多个参数,语法如下:
css
transition: [过渡属性] [过渡时长] [过渡 timing 函数] [延迟时间];
各参数的含义和规则:
参数 | 说明 | 可选值 / 示例 | 是否必填 |
---|---|---|---|
过渡属性(property) | 指定哪些 CSS 属性需要过渡(如 width 、background ,all 表示所有属性) |
width 、background 、all 等 |
否(默认 all ) |
过渡时长(duration) | 过渡效果持续的时间(必须设置,否则无过渡效果) | 0.3s 、500ms (秒 / 毫秒) |
是 |
timing 函数 | 过渡速度的变化曲线(控制动画的 “节奏感”) | ease (默认)、linear 、ease-in 等 |
否 |
延迟时间(delay) | 延迟多久开始过渡 | 0s (默认)、0.5s |
否 |
二、核心参数详解
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 时背景色、阴影、尺寸的平滑过渡:
<!DOCTYPE html>
<html>
<head><style>.btn {padding: 10px 20px;border: none;border-radius: 4px;background: #3b82f6;color: white;font-size: 16px;cursor: pointer;/* 过渡配置:所有属性,0.3秒,ease曲线 */transition: all 0.3s ease;}.btn:hover {/* hover 时的样式变化 */background: #2563eb; /* 深色背景 */transform: translateY(-2px); /* 上移2px */box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 加深阴影 */}</style>
</head>
<body><button class="btn">Hover 我</button>
</body>
</html>
解析:
- 按钮默认状态定义了
transition: all 0.3s ease
,表示所有样式变化都将在 0.3 秒内以ease
曲线过渡。 - 当鼠标 hover 时,
background
、transform
、box-shadow
同时变化,这些变化会被过渡效果 “平滑化”,而非瞬间切换。
3. 延迟过渡:实现序列动画
通过 transition-delay
让多个元素按顺序触发过渡,形成动画序列:
<!DOCTYPE html>
<html>
<head><style>.container {display: flex;gap: 10px;margin: 20px;}.dot {width: 30px;height: 30px;border-radius: 50%;background: #6366f1;/* 基础过渡配置:尺寸变化,0.3秒 */transition: transform 0.3s ease;}/* 为每个圆点设置不同延迟 */.dot:nth-child(1) { transition-delay: 0s; }.dot:nth-child(2) { transition-delay: 0.1s; }.dot:nth-child(3) { transition-delay: 0.2s; }.dot:nth-child(4) { transition-delay: 0.3s; }.container:hover .dot {transform: scale(1.5); /* 所有圆点放大1.5倍 */}</style>
</head>
<body><div class="container"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>
</body>
</html>
解析:
- 4 个圆点的过渡属性相同,但
transition-delay
依次增加 0.1s,当容器 hover 时,会按顺序逐个放大,形成 “波浪式” 动画。
4. 配合 transform 实现复杂动画
transition
与 transform
(变形)结合是最常用的动画组合,可实现平移、旋转、缩放等效果:
<!DOCTYPE html>
<html>
<head><style>.card {width: 200px;height: 150px;background: white;border-radius: 8px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);display: flex;align-items: center;justify-content: center;font-size: 18px;/* 过渡:transform和box-shadow,0.5秒 */transition: transform 0.5s ease, box-shadow 0.5s ease;}.card:hover {/* 上移+放大+加深阴影 */transform: translateY(-10px) scale(1.05);box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);}</style>
</head>
<body><div class="card">Hover 我</div>
</body>
</html>
解析:
transform
同时实现translateY
(上移)和scale
(放大),transition
让这些变形平滑进行,配合阴影变化,模拟卡片 “浮起” 的立体感。
四、注意事项
- 触发条件:
transition
需要样式变化才能触发,常见触发方式:- 伪类:
:hover
、:active
、:focus
等。 - 类名变化:通过 JS 动态添加 / 移除类(如
element.classList.add('active')
)。 - 媒体查询:窗口大小变化触发样式调整。
- 伪类:
- 性能优化:
- 优先过渡
transform
和opacity
,这两个属性不会触发浏览器的 “重排重绘”,性能更好。 - 避免使用
transition: all
(会监听所有属性变化,浪费性能),尽量指定具体属性(如transition: width 0.3s
)。
- 优先过渡
- 兼容性:现代浏览器(Chrome、Firefox、Edge、Safari 10+)均支持,无需前缀;IE10 及以上部分支持,低版本 IE 不支持。
- 局限性:
transition
只能实现 “从 A 到 B” 的一次性过渡,无法实现循环动画或复杂时间线动画(这类需求需用animation
属性)。
五、transition
与 animation
的区别
特性 | transition |
animation |
---|---|---|
触发方式 | 需要样式变化触发(被动) | 可自动触发,支持循环(主动) |
复杂度 | 适合简单的 “状态切换” 动画 | 适合复杂的多关键帧动画 |
控制能力 | 仅能定义开始和结束状态 | 可定义多个关键帧(@keyframes ) |
循环 | 不支持循环(需手动重置样式) | 支持 animation-iteration-count 循环 |
简单说:简单交互用 transition
,复杂动画用 animation
。
通过 transition
,只需几行代码就能让元素交互变得生动流畅,是前端开发中提升用户体验的重要工具。掌握其参数组合和使用场景后,可轻松实现按钮反馈、卡片悬浮、菜单展开等常见交互效果。