关键帧动画（@keyframes）结合animation属性可实现HTML5动态效果。1. 用@keyframes定义0%到100%的样式变化；2. 通过animation-name、duration等子属性控制动画行为；3. 使用简写animation: name 3s linear infinite提升效率；4. 配合transform、opacity及fill-mode、alternate等技巧优化表现。需注意百分比写法与浏览器兼容性，建议添加-webkit-前缀并在现代浏览器测试，即可流畅实现位移、变色、旋转等常见动效。
HTML5 本身不直接提供动画功能，但结合 CSS3 的动画特性，可以轻松实现丰富的动态效果。关键帧动画（@keyframes）是 CSS3 提供的核心工具之一，用于定义动画的中间过程，让元素在不同状态之间平滑过渡。
1. 使用 @keyframes 定义关键帧
通过 @keyframes 规则，你可以指定动画在某个时间点的样式状态。浏览器会自动补全中间帧，形成流畅动画。
语法格式：
@keyframes 动画名称 {0% { 样式属性 }
50% { 样式属性 }
100% { 样式属性 }
}
示例：让一个 div 从左移到右并变色
立即学习“前端免费学习笔记（深入）”；
@keyframes slideAndColor {0% {
background-color: red;
transform: translateX(0);
}
100% {
background-color: blue;
transform: translateX(200px);
}
}
2. 将动画应用到元素
定义好关键帧后，使用 animation 属性将动画绑定到具体 HTML 元素。
常用 animation 子属性：
- animation-name：指定 @keyframes 中定义的动画名称
- animation-duration：动画持续时间（如 2s）
- animation-timing-function：速度曲线（如 ease、linear）
- animation-delay：延迟多久开始
- animation-iteration-count：播放次数（infinite 表示循环）
- animation-direction：播放方向（normal、reverse、alternate）
示例 CSS：
.box {width: 100px;
height: 100px;
background-color: red;
animation-name: slideAndColor;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
对应的 HTML：
3. 简写 animation 属性
可以使用简写方式一次性设置多个动画参数：
.box {animation: slideAndColor 3s linear infinite;
}
顺序通常为：name、duration、timing-function、delay、iteration-count
4. 常见应用场景与技巧
- 用 transform 实现位移、旋转、缩放更高效，避免重排
- 使用 opacity 配合关键帧做淡入淡出
- 添加 animation-fill-mode: forwards 让动画结束时保持最终状态
- 用 alternate 实现来回播放效果
基本上就这些，掌握 @keyframes 和 animation 的配合，就能做出大多数网页动效。不复杂但容易忽略细节，比如百分比写法、浏览器兼容性（加 -webkit- 前缀可增强支持），建议在现代浏览器中测试。
