transform 负责元素变形，animation 控制动画过程。通过 scale 和 translate 实现缩放平移，结合 @keyframes 定义关键帧，设置 duration、timing-function、iteration-count 等参数实现流畅动画，常用于按钮悬停、加载提示等交互场景，提升用户体验。
想让网页元素动起来，比如缩放或平移，CSS 的 transform 和 animation 是最常用的组合。它们配合使用可以创建流畅、高性能的动画效果，无需 JavaScript。
理解 transform：控制元素变形
transform 属性用于对元素进行旋转、缩放、移动或倾斜。实现缩放和平移主要用到两个函数：
- scale(x, y)：调整元素的大小。例如 scale(1.5) 表示放大为原来的 1.5 倍。
- translate(x, y)：在 X 轴和 Y 轴上移动元素。比如 translate(20px, -10px) 向右移动 20px，向上移动 10px。
这些变换不会影响页面中其他元素的布局，非常适合做动画。
定义 animation：控制动画过程
animation 属性用来控制动画的播放方式，需要配合 @keyframes 规则使用。
立即学习“前端免费学习笔记（深入）”；
- @keyframes 定义动画的关键帧，比如从什么状态变到什么状态。
- animation 可设置动画时长、速度曲线、延迟、重复次数等。
例如，你想让一个 div 从缩小状态慢慢放大并向上移动，可以这样写：
CSS 示例：
.animated-box {
width: 100px;
height: 100px;
background: #3498db;
margin: 50px auto;
animation: scaleAndMove 2s ease-in-out infinite alternate;
}
@keyframes scaleAndMove {
from {
transform: scale(0.5) translate(0, 0);
}
to {
transform: scale(1.2) translate(0, -20px);
}
}
这段代码会让元素在 2 秒内从 0.5 倍大小、无位移的状态，过渡到 1.2 倍大小并上移 20px，然后反复播放。
常用 animation 属性说明
你可以通过以下属性精细控制动画行为：
- animation-duration：动画持续时间，如 2s。
- animation-timing-function：动画速度曲线，常用有 ease、linear、ease-in-out。
- animation-iteration-count：播放次数，infinite 表示无限循环。
- animation-direction：是否反向播放，alternate 表示来回播放。
- animation-delay：延迟多久开始动画。
这些都可以直接写在 animation 简写属性里。
实际应用场景建议
这种组合常用于按钮悬停效果、加载动画、卡片浮现等交互场景。
例如按钮 hover 缩放：
.btn:hover {
animation: pop 0.3s forwards;
}
@keyframes pop {
to {
transform: scale(1.1);
}
}
用户鼠标放上去时，按钮轻微放大，提升交互反馈。
基本上就这些。transform 负责“怎么变”，animation 负责“何时变、变多久”。两者结合，简单又强大。注意避免过度使用动画影响体验，保持自然流畅最重要。
