答案是通过animation-name与@keyframes配合定义动画，使用语义化命名和百分比关键帧控制动画过程，并结合duration、timing-function等属性实现流畅效果，最后以简写形式优化代码。
在CSS中创建动画，核心是使用 animation-name 与 @keyframes 配合。通过定义关键帧来描述动画过程，再将这个动画名称应用到元素上，就能实现流畅的视觉效果。
animation-name 与 @keyframes 基本语法
animation-name 指定你想要使用的动画名称，而这个名称必须对应一个用 @keyframes 定义的动画规则。
例如：
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.box {
animation-name: slideIn;
animation-duration: 1s;
}
上面代码中，@keyframes slideIn 定义了一个从左向右滑入的动画，animation-name: slideIn 将其绑定到 .box 元素。
使用百分比控制关键帧细节
除了 from 和 to，你还可以使用百分比精确控制动画的中间状态。
立即学习“前端免费学习笔记（深入）”；
比如让元素先快后慢地移动：
@keyframes pulseMove {
0% {
transform: translateX(0);
opacity: 0.5;
}
70% {
transform: translateX(80px);
opacity: 1;
}
100% {
transform: translateX(60px);
opacity: 0.8;
}
}
这样可以在不同时间点设置属性值，实现更自然的过渡效果。
多个关键帧动画复用与命名技巧
你可以为不同动画起语义化名称，方便维护和复用。
建议做法：- 使用动词+目标命名，如 fadeIn、rotateSpin、bounceIn
- 避免使用模糊名称如 anim1、testAnimation
- 可为同一元素组合多个动画（用逗号分隔）
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.text {
animation-name: fadeIn;
animation-duration: 2s;
animation-fill-mode: forwards;
}
结合其他 animation 属性提升效果
仅设置 animation-name 不足以完整控制动画，需配合其他属性：
- animation-duration：动画持续时间，如 0.5s 或 2s
- animation-timing-function：速度曲线，如 ease-in-out、cubic-bezier()
- animation-delay：延迟启动时间
- animation-iteration-count：播放次数，可设为 infinite
- animation-direction：是否反向播放，如 reverse 或 alternate
.box {
animation: slideIn 1.5s ease-out 0.3s infinite alternate;
}
基本上就这些。掌握 animation-name 与 @keyframes 的配合，再合理使用关键帧百分比和动画参数，就能灵活创建各种CSS动画效果。不复杂但容易忽略细节，比如命名规范和性能优化（避免过度重绘）。
