CSS transition 与 transform: scale() 结合可实现按钮悬停放大、图片预览等平滑缩放动画，通过设置 transition: transform 0.3s ease 控制过渡时间与速度，scale(1.1) 定义缩放比例，利用硬件加速提升性能，避免布局重排，增强交互体验。
在
网页设计
中，
CSS transition
与
transform: scale()
结合使用，可以实现平滑的缩放动画效果，提升用户交互体验。比如按钮悬停放大、图片缩放预览等场景都非常实用。关键在于控制过渡时间和缩放比例，让动画自然不突兀。
transition 基础用法
transition 用于定义元素属性变化时的过渡效果。常用属性包括：
transition-property
：指定要过渡的 CSS 属性，如 transform、opacity
transition-duration
：过渡持续时间，如 0.3s
transition-timing-function
：过渡速度曲线，如 ease、linear、cubic-bezier()
transition-delay
：延迟多久开始过渡
简写形式：
transition: property duration timing-function delay;
scale() 缩放变换说明
transform: scale() 可以对元素进行二维缩放。参数表示缩放倍数：
立即学习
“
前端免费学习笔记（深入）
”；
scale(1)
：原始大小
scale(1.2)
：放大到 1.2 倍
scale(0.8)
：缩小到 0.8 倍
scale(X, Y)
：分别设置水平和垂直方向缩放
注意：scale 不会影响文档流，缩放后元素占据的空间不变。
Refore网页转设计
一款加速产品 UI 设计迭代的工具，可以一键将任意网页和交互导入到 Pixso、MasterGo、即时设计、Figma，实现像素级还原。
下载
结合 transition 实现平滑缩放
将 transition 和 scale 配合使用，常见于:hover触发的动画效果。例如：
这样，鼠标悬停时按钮会平滑放大 10%，移开后恢复原状。transition 确保 transform 的变化不是瞬间完成，而是有动画过程。
优化建议与注意事项
为了获得更流畅的性能表现，推荐以下做法：
优先对 transform 使用过渡，因为
浏览器
会对 translate/scale 等做
硬件加速
避免对 width、height、margin 等布局属性频繁过渡，可能引发重排，影响性能
可搭配 will-change: transform 提示浏览器提前优化
在移动端注意 touch 操作下的响应性，避免过度缩放导致内容不可读
基本上就这些，合理使用 transition 和 scale，能让界面动效更自然、更具吸引力。
.button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 4px;
transition: transform 0.3s ease;
}
.button:hover {
transform: scale(1.1);
}