首先定义关键帧动画并命名，再通过animation-name和animation-duration设置名称与时长，即可实现CSS动画。1. 使用@keyframes定义动画名称如slideIn；2. 用animation-duration设定播放时长如1s；3. 将两者应用于元素；4. 可简写为animation: slideIn 1s。需注意拼写、定义完整及浏览器兼容性。
通过 animation-name 与 animation-duration 制作动画，是 CSS 动画的基础。你需要先定义一个关键帧动画，再将其应用到元素上，并设置播放时长。
1. 使用 animation-name 指定动画名称
animation-name 用于指定 @keyframes 定义的动画名称。只有先命名动画，才能在元素上使用它。
例如：
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
这里定义了一个名为 slideIn 的动画，表示元素从左侧滑入。
2. 使用 animation-duration 设置动画时长
animation-duration 决定动画完成一次所需的时间，单位可以是秒（s）或毫秒（ms）。
立即学习“前端免费学习笔记（深入）”；
常见用法：- 0.5s：半秒完成动画
- 2s：两秒完成动画
- 默认值为 0，即没有动画效果
3. 将两者结合使用
把 animation-name 和 animation-duration 同时应用到元素上，就能看到动画效果。
.animated-box {
width: 100px;
height: 100px;
background: blue;
animation-name: slideIn;
animation-duration: 1s;
}
这样，class 为 animated-box 的元素就会在 1 秒内从左边滑入可视区域。
4. 简写形式更高效
你可以使用简写的 animation 属性同时设置多个参数：
.animated-box {
animation: slideIn 1s;
}
这行代码等同于分别写 animation-name 和 animation-duration。
基本上就这些。只要定义好关键帧，再指定名称和时长，就能让元素动起来。不复杂但容易忽略细节，比如拼写错误或忘记写 @keyframes。确保浏览器支持并测试效果即可。
