CSS实现图片动画帧主要通过@keyframes与animation属性协同完成，首先需准备连续动作的图片序列，将其整合为一张雪图（sprite sheet），通过定义关键帧，动态调整background-position值，使雪图在不同时间点显示对应区域，形成连续动画，结合animation-duration控制播放速度、animation-iteration-count设置循环次数，即可实现流畅帧动画，该方法无需JavaScript，性能较好，适用于游戏角色动作、加载动画等场景，是前端实现轻量级动态效果的高效手段。
CSS实现图片动画帧：打造流畅的逐帧动画效果
在网页动画中，逐帧动画（Frame-by-Frame Animation）是一种通过连续播放静态图片帧来形成动态效果的常见技术，相比CSS过渡或关键帧动画，逐帧动画能更精准地控制每一帧的细节，适合表现复杂的动态效果（如角色行走、图标动效等），本文将详细介绍如何使用CSS实现图片动画帧，从原理到实践,帮你掌握这一技巧。
什么是图片动画帧？为什么用CSS实现？
图片动画帧的本质是“连续播放的静态图片序列”——就像传统动画或电影胶片，通过快速切换不同帧的内容，让静态图片产生动态感，一个“加载中”的动画可能是5张不同状态的图标循环播放,一个角色行走动画可能是10张不同姿势的图片连续切换。
相比用JavaScript控制图片切换（如setInterval修改src），CSS实现动画帧的优势更明显：
- 性能更优：CSS动画由浏览器直接渲染，能利用硬件加速（如
transform、opacity属性），比JS操作DOM更流畅； - 代码更简洁：无需复杂的JS逻辑，仅需几行CSS就能控制动画播放、暂停、循环等；
- 易于维护：动画逻辑与样式分离，修改动画参数（如速度、方向）只需调整CSS属性。
准备工作：制作图片帧序列
在开始之前，你需要准备一组连续的图片帧，这些图片通常是同一对象在不同时间点的状态，
- 图标动效：5张不同旋转角度的图标；
- 角色动画：8张不同步伐的角色图片；
- 加载动画：3张不同填充进度的进度条。
注意事项：
- 尺寸统一：所有帧的宽高必须一致，否则动画切换时会出现跳动；
- 命名规律：建议用数字序号命名（如
frame1.png、frame2.png…），方便后续用CSS引用； - 格式选择：优先使用PNG（支持透明背景）或SVG（矢量图，无损缩放），减少文件体积。
CSS实现图片动画帧的两种核心方法
方法1：使用background-image + background-position（推荐）
这是最常用、性能最好的方法——将所有帧图片拼接成一张“精灵图”（Sprite Sheet），然后通过改变background-position的值,让容器显示不同的帧区域。
步骤1：制作精灵图
用PS或其他工具将所有帧图片水平拼接成一张长图，5张100x100的帧图片，拼接后精灵图的尺寸为500x100（宽度=帧数×单帧宽度，高度=单帧高度）。
步骤2：HTML结构
用一个容器（如div）包裹动画元素，设置容器尺寸与单帧图片一致：
<div class="animation-container"> <div class="frame-animation"></div> </div>
步骤3：CSS样式
设置容器的尺寸、背景图为精灵图，然后通过@keyframes控制background-position的移动：
/* 容器样式：固定尺寸，隐藏溢出 */
.animation-container {
width: 100px; /* 单帧宽度 */
height: 100px; /* 单帧高度 */
overflow: hidden;
}
/* 动画元素：设置精灵图背景 */
.frame-animation {
width: 500px; /* 精灵图总宽度 */
height: 100px; /* 单帧高度 */
background-image: url('frames.png'); /* 精灵图路径 */
background-repeat: no-repeat;
animation: play-animation 1s steps(5) infinite;
}
/* 关键帧：从左到右移动背景图 */
@keyframes play-animation {
from {
background-position: 0 0; /* 显示第1帧 */
}
to {
background-position: -500px 0; /* 移动到末尾，显示最后1帧 */
}
}
关键参数解析：
steps(5)：动画分为5步完成（对应5帧），每步停留一定时间，实现“逐帧切换”效果（若用linear则会平滑过渡，不是逐帧）；background-position：负值表示向左移动，移动距离=精灵图总宽度（-500px），确保每帧都能显示；animation-iteration-count: infinite：循环播放（可改为1只播放一次）。
方法2：使用<img>标签 + object-position
如果不想拼接精灵图，也可以直接用多张独立图片，通过<img>标签的object-position属性控制显示区域，但这种方法需要配合<picture>或多个<img>标签，性能稍差,适合帧数较少的场景。
步骤1：HTML结构
用<div>包裹多个<img>标签，所有<img>重叠在一起：
<div class="animation-container"> <img src="frame1.png" class="frame" style="opacity: 1;"> <img src="frame2.png" class="frame" style="opacity:
