transition与transform结合可创建平滑动画，前者控制变化速度，后者实现位移、旋转等形变，常用于按钮悬停、菜单弹出等交互场景。
在CSS中，transition 和 transform 经常一起使用，用来创建平滑的动画效果。transition 控制属性变化的速度和时间，transform 则负责元素的形变（如位移、旋转、缩放等）。两者结合能让视觉交互更自然。
基本语法与作用
transform 用于对元素进行变形操作，常见值包括：
- translate(x, y)：移动元素
- rotate(angle)：旋转元素
- scale(x, y)：缩放元素
- skew(x, y)：倾斜元素
transition 定义属性变化时的过渡效果，语法为：
transition: property duration timing-function delay;例如：transition: transform 0.3s ease; 表示 transform 属性在变化时使用 0.3 秒的缓动动画。
立即学习“前端免费学习笔记（深入）”；
常见使用场景示例
以下是一个按钮悬停时放大并旋转的例子：
.button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
/ 添加过渡效果 /
transition: transform 0.3s ease;
}
.button:hover {
/ 鼠标悬停时应用变换 /
transform: scale(1.1) rotate(5deg);
}
当鼠标移到按钮上时，它会平滑地放大并轻微旋转，离开时也会缓慢恢复原状。
优化性能与注意事项
使用 transform 和 transition 结合时，注意以下几点可提升性能和兼容性：
- 优先使用 transform 而不是改变 left/top 等布局属性，因为 transform 由 GPU 加速，更流畅
- 将 transition 应用在初始状态（正常态），而不是 hover 或 active 状态，确保进出动画都生效
- 避免对多个属性分别写 transition，推荐只监听 transform：
transition: transform 0.3s ease; - 在移动端注意添加
will-change: transform;可提前优化渲染层
支持多阶段动画的进阶技巧
如果需要更复杂的动画过程，可以结合 @keyframes 和 animation，但若只需简单交互，transition + transform 已足够。例如点击后弹出并淡入的菜单项：
.menu-item {
opacity: 0;
transform: translateY(10px);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.menu-open .menu-item {
opacity: 1;
transform: translateY(0);
}
这里同时过渡了 opacity 和 transform，使用贝塞尔曲线让动画更有弹性感。
基本上就这些。掌握 transition 与 transform 的配合，能让你的网页交互更生动且高效。关键在于合理设置过渡属性和时机，避免过度动画影响体验。
