opacity、transform等属性可实现平滑过渡，推荐使用transform和opacity以提升性能，避免频繁改变宽高和内外边距以防重排。
在 CSS 中，transition-property 用于指定哪些 CSS 属性在发生改变时应用过渡动画。下面是一些常用的可过渡属性，它们在实际开发中被广泛使用。
常用可过渡的 CSS 属性
以下属性支持 transition 动画，适合用来制作平滑的视觉效果：
- opacity：控制元素透明度，常用于淡入淡出效果
- transform：包括位移（translate）、旋转（rotate）、缩放（scale）等，性能好且推荐使用
- width / height：改变元素宽高，注意性能影响
- margin / padding：内外边距的变化也可以过渡
- left / top / right / bottom：定位偏移量，适用于定位元素
- background-color：背景颜色渐变，常见于按钮悬停效果
- color：文字颜色的平滑变化
- box-shadow：阴影大小或颜色的过渡
- border-radius：圆角大小变化动画
- font-size：字体大小过渡，可用于标题或图标变化
如何设置 transition-property
你可以指定单个或多个属性进行过渡：
- transition-property: opacity; —— 只对透明度生效
- transition-property: background-color, transform; —— 同时对背景色和变换生效
- transition-property: all; —— 所有可过渡属性都启用动画（不推荐滥用，影响性能）
建议使用的组合方式
为了兼顾性能和视觉效果，推荐以下写法：
立即学习“前端免费学习笔记（深入）”；
- 优先使用 transform 和 opacity，因为它们由 GPU 加速，动画更流畅
- 避免对 width、height、margin、padding 频繁过渡，可能引发重排（reflow）
- 使用具体属性名代替
all，提升性能并避免意外动画
