transition用于实现css属性的平滑过渡，需设置property、duration、timing-function和delay；常用于:hover等状态变化，触发颜色、位置等动画效果，提升交互体验。
在CSS中，transition 属性用于控制元素从一种样式平滑过渡到另一种样式的效果。它可以让颜色、大小、位置、透明度等属性的变化不再突兀，而是以动画的形式缓慢呈现，从而提升用户体验。
transition 的基本语法
transition 是一个简写属性，可以同时设置以下四个子属性：
- transition-property：指定要应用过渡效果的CSS属性，比如 width、opacity、transform 等。设为 all 表示所有可动画属性都参与过渡。
- transition-duration：定义过渡持续的时间，单位为秒（s）或毫秒（ms）。必须设置，否则过渡无效。
- transition-timing-function：定义过渡的速度曲线，如 ease、linear、ease-in、ease-out、cubic-bezier() 等。
- transition-delay：指定过渡开始前的延迟时间。
完整写法示例：
div {transition: margin-left 0.5s ease-in 0.1s;
}
常用写法与示例
实际开发中，通常只关心持续时间和速度函数，其他使用默认值。
立即学习“前端免费学习笔记（深入）”；
LOVESTUdio多校园网络店铺
下载
主要更新介绍： 完美整合Discuz!论坛，实现一站式登陆、退出、注册； 同步所有会员资料； 新增购物车功能，商品购买更加方便、快捷； 新增部分快捷菜单，网站访问更加方便； 限制首页商品、店铺标题显示长度； 修正会员后台管理不能更改密码的错误； 完善商品显示页面所有功能链接； 修正后台标签管理部分错误； 修正前台学校列表不按后台顺序显示的错误； 修正搜索功能中学校名称过长导致显示紊乱的现象； 修正
- 只设置持续时间：
transition: 0.3s;
默认会对所有可动画属性生效，速度为 ease。 - 多个属性分别过渡：
transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
常见应用场景：按钮悬停变色、菜单展开收起、图片淡入淡出等。
触发条件与注意事项
transition 不会自动播放，必须依赖状态变化才能触发，最常见的就是 :hover、:focus、:checked 或通过 JavaScript 添加/移除 class。
- 只有发生了属性值的变化，并且该属性支持动画，才会触发动画。
- 不是所有CSS属性都能过渡，可参考 MDN 可动画属性列表。
- 过渡是从“当前值”到“目标值”，如果中间没有明确的初始值，浏览器可能无法计算中间帧，导致动画失效。
transitionend 事件
当过渡动画结束时，会触发 transitionend 事件，可用于JavaScript中执行后续操作。
element.addEventListener('transitionend', function(e) {console.log('过渡完成:', e.propertyName);
});
基本上就这些。合理使用 transition 能让界面更自然流畅，但不宜滥用，避免影响性能和用户感知。不复杂但容易忽略细节。
