CSS Keyframes Animation 完全指南
目录
1. 关键帧动画的作用
CSS Keyframes Animation 允许你通过定义 动画序列的多个关键帧 实现复杂动画，适用于：
- 多阶段动画（如淡入→移动→淡出）
- 无限循环动画（如加载旋转）
- 精确控制动画的每一步状态
2. 核心语法
2.1 定义动画：@keyframes
@keyframes animation-name {
0% { /* 初始状态 */ }
50% { /* 中间状态 */ }
100% { /* 结束状态 */ }
}
- 百分比代表动画进程（也可用
from和to代替0%和100%）。
2.2 调用动画：animation 属性
.element {
animation-name: animation-name;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
/* 简写 */
animation: animation-name 2s ease-in-out 1s infinite alternate;
}
3. 代码示例
基础示例：元素淡入
<div class="fade-in">Hello World</div>
<style>
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fade-in 1.5s ease-out;
}
</style>
多阶段动画：跳动小球
@keyframes bounce {
0% { transform: translateY(0); }
30% { transform: translateY(-100px); }
60% { transform: translateY(0); }
80% { transform: translateY(-50px); }
100% { transform: translateY(0); }
}
.ball {
animation: bounce 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}
组合动画：移动并旋转
@keyframes move-and-spin {
0% {
transform: translateX(0) rotate(0deg);
}
100% {
transform: translateX(300px) rotate(720deg);
}
}
.box {
animation: move-and-spin 3s linear;
}
4. 动画属性详解
| 属性 | 描述 | 常用值 |
|---|---|---|
animation-name | 指定 @keyframes 动画名称 | 自定义名称（如 slide-in） |
animation-duration | 动画持续时间 | 2s, 500ms |
animation-timing-function | 速度曲线 | ease, linear, cubic-bezier() |
animation-delay | 动画开始前的延迟 | 1s, 200ms |
animation-iteration-count | 播放次数 | 1, infinite, 3 |
animation-direction | 播放方向 | normal, reverse, alternate |
animation-fill-mode | 动画结束后的状态 | forwards（保持最后一帧）, backwards（应用第一帧） |
animation-play-state | 暂停/播放 | running, paused |
5. 性能优化
- 优先使用
transform和opacity：避免触发重排（如width,margin）。 - 减少复杂计算：避免在关键帧中频繁修改
box-shadow或filter。 - 硬件加速：强制触发 GPU 加速：
.element { transform: translateZ(0); }
6. 常见问题
Q1：动画不生效？
- 检查
animation-name是否与@keyframes名称一致。 - 确认
animation-duration不为0。
Q2：如何让动画结束后保持最后一帧？
.element {
animation-fill-mode: forwards;
}
Q3：如何暂停动画？
.element {
animation-play-state: paused;
}
Q4：如何实现逐帧动画（精灵图）？
使用 steps() 缓动函数：
@keyframes run {
from { background-position: 0 0; }
to { background-position: -1600px 0; } /* 总宽度 */
}
.character {
animation: run 1s steps(8) infinite; /* 8帧 */
}
7. 思维导图结构
CSS Keyframes Animation
├── 定义动画
│ └── @keyframes 规则
├── 调用动画属性
│ ├── animation-name
│ ├── animation-duration
│ ├── animation-timing-function
│ ├── animation-delay
│ ├── animation-iteration-count
│ ├── animation-direction
│ ├── animation-fill-mode
│ └── animation-play-state
├── 缓动函数
│ ├── 预设值（ease, linear）
│ └── cubic-bezier()
├── 性能优化
│ ├── GPU 加速
│ └── 避免重排
└── 应用场景
├── 加载动画
├── 页面过渡
└── 交互反馈
实战示例
1. 加载旋转动画
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.loader {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
2. 悬浮卡片 3D 翻转
@keyframes flip {
0% { transform: rotateY(0); }
50% { transform: rotateY(90deg); }
100% { transform: rotateY(0); }
}
.card:hover {
animation: flip 0.6s ease;
}
扩展资源
通过此文档，你可以掌握如何通过 @keyframes 创建复杂动画，并优化其性能。实践时建议从简单动画开始，逐步增加复杂度！
