CSS过渡通过设置transition属性实现元素样式的平滑变化，常用于按钮悬停等交互效果。其语法为transition: property duration timing-function delay，如color 0.3s ease-in 0.1s；需通过:hover、JavaScript改类等方式触发，配合可动画属性如color、transform、opacity等使用，其中transform因GPU加速更推荐用于位移缩放，注意duration不可省略，否则无过渡效果。
CSS过渡（Transition）是一种让元素从一种样式平滑地变化到另一种样式的效果，常用于按钮悬停、菜单展开等交互场景。它不需要JavaScript就能实现简单的动画效果，使用起来简单高效。
transition的基本语法
transition是一个复合属性，可以同时设置多个子属性：
transition: property duration timing-function delay;- property：要过渡的CSS属性名称，比如 width、color、opacity 等，也可以使用 all 表示所有可动画属性
- duration：过渡持续时间，单位为秒（s）或毫秒（ms），如 0.5s
- timing-function：速度曲线函数，控制动画快慢节奏，常用有 ease、linear、ease-in、ease-out 等
- delay：延迟多久开始过渡，可选参数
例如：
transition: color 0.3s ease-in 0.1s;表示颜色变化用0.3秒，以ease-in方式执行，并延迟0.1秒开始。
立即学习“前端免费学习笔记（深入）”；
如何触发过渡效果
过渡不会自动播放，需要通过状态改变来触发，常见方式包括：
- 鼠标悬停（:hover）
- 焦点状态（:focus）
- 激活状态（:active）
- 通过JavaScript添加/移除class
举个按钮变色的例子：
.button {background-color: #007bff;
color: white;
padding: 10px 20px;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
当鼠标移到按钮上时，背景色会平滑变深。
软件介绍 a.. 当今的市场压力迫使企业在提高产品质量和性能的同时，降低成本和缩短产品上市的时间。每个企业都在努力更新自己，包括其生产过程和产品，以满足这些需求。实现这些目标的三种方法是：业务处理再设计、新技术应用、与顾客形成战略联盟。 b.. 对所有的商业应用只有建立整体的IT体系结构，才能形成战略优势，才能确定企业的突破口。这种新的体系结构是以三层结构标准为基础的客户关系
可动画的CSS属性
不是所有CSS属性都能过渡，只有那些具有中间值的属性才支持。常见的可过渡属性包括：
- 颜色类：color、background-color、border-color
- 尺寸类：width、height、font-size、margin、padding
- 位置类：left、top、transform（推荐使用）
- 透明度：opacity
- 阴影：box-shadow、text-shadow
注意：display 和 visibility 不支持过渡，如果要做显隐动画，建议结合 opacity 和 height 配合 overflow 实现。
使用transform提升性能
在做位移、缩放等动画时，推荐使用 transform 而不是 left/top 或 width/height。因为 transform 是由GPU加速的，页面重绘成本更低。
比如让元素平移并缩放：
.box {transition: transform 0.4s ease;
}
.box:hover {
transform: translateX(20px) scale(1.1);
}
这种写法比改变 margin 或 width 更流畅，尤其在移动设备上表现更好。
基本上就这些。掌握 transition 的核心就是理解“状态变化 + 平滑过渡”的逻辑。只要设置好初始和目标样式，再配上合适的过渡参数，就能做出自然的交互反馈。不复杂但容易忽略细节，比如忘记设 duration 会导致默认为0，看起来像没效果。多试几次就熟练了。
