@keyframes定义动画关键帧，animation应用并控制动画效果，二者结合实现无需JavaScript的流畅CSS动画。
CSS动画让网页元素能够平滑地从一种样式过渡到另一种样式，无需依赖JavaScript或Flash。它通过@keyframes和animation属性实现，是现代前端开发中提升用户体验的重要手段。
什么是 @keyframes 规则
@keyframes 是定义动画关键帧的核心规则，用来描述动画过程中某个时间点的样式状态。浏览器会自动在这些关键帧之间进行插值，生成流畅的中间过渡效果。
你可以把它理解为“动画剧本”，告诉元素在0%、50%、100%等时间节点应该呈现什么样子。
示例：
@keyframes slideIn {
0% { transform: translateX(-100px); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
上面代码定义了一个名为 slideIn 的动画：元素从左侧100px外、透明状态，移动到原始位置并完全显示。
立即学习“前端免费学习笔记（深入）”；
animation 属性详解
animation 属性用于将 @keyframes 定义的动画应用到具体元素上。它可以拆分为多个子属性，控制动画的运行方式。
常用子属性包括：
-
animation-name：指定 @keyframes 定义的动画名称，如
slideIn -
animation-duration：动画持续时间，单位为秒（s）或毫秒（ms），如
2s -
animation-timing-function：控制动画速度曲线，常用值有
ease、linear、ease-in-out - animation-delay：动画延迟执行的时间
-
animation-iteration-count：动画播放次数，可设为
infinite实现无限循环 -
animation-direction：播放方向，如
reverse、alternate（来回播放） -
animation-fill-mode：控制动画之外的状态，如
forwards保持最后一帧 - animation-play-state：控制播放或暂停，可用于交互场景
animation: slideIn 2s ease-in-out 0.5s infinite alternate forwards;
这一行代码同时设置了动画名称、时长、缓动函数、延迟、循环次数、方向和结束状态。
实际应用场景与技巧
CSS动画适合用在按钮悬停、加载提示、页面入场动效等轻量级交互中。
一些实用建议：
- 使用
transform和opacity实现高性能动画，避免频繁触发重排（reflow） - 结合
:hover、@media等实现响应式动效 - 命名关键帧时使用语义化名称，如
fadeIn、rotateSpin - 调试时可通过设置
animation-play-state: paused暂停动画查看中间状态
基本上就这些。掌握 @keyframes 和 animation 的配合使用，就能在不写一行 JavaScript 的情况下，实现大多数常见的视觉动效。关键是理解“定义”与“应用”的分离逻辑——一个负责写剧本，一个负责开演。
