CSS动画效果-动起来的精灵图(雪碧图)

---

highlight: a11y-dark

theme: cyanosis

利用CSS让精灵图动起来

主要使用了动画效果，精灵图的载在展示框中移动，展示框在可视屏幕上移动，就产生了在奔跑的假象

下面做出来是这个效果：

CSS的动画animation

1、动画的基本使用

制作动画分为两步︰ 1．先定义动画 2．再使用(调用)动画

我通过例题向大家展示一下动画是什么： style标签里的内容， javascript div{ width: 20px; height: 20px; background-color: green; animation: changeswidth 6s infinite steps(14);alternate; } @keyframes changesbig{ //这个0%表示开始状态 0%{ width:20px; } //这个100%表示结束状态 100%{ width: 300px; } } body标签里的内容， javascript

运行出来的效果GIF展示如下

2、来揭晓一下她的属性

| 属性 | 描述 | |--|--| |@keyframes|规定动画| |animation |所有动画属性的简写属性，除了animation-play-state属性| |animation-name| 规定@keyframes动画的名称。(必须的) |animation-duration| 规定动画完成—个周期所花费的秒或毫秒，默认是0。(必须的)| |animation-timing-function |规定动画的速度曲线，默认是“ease” | |animation-delay |规定动画何时开始，默认是0| |animation-iteration-count |规定动画被播放的次数，默认是1，还有infinite(无线| |animation-direction| 规定动画是否在下一周期逆向播放，默认是“normal "，“alternate”逆播放| |animation-fill-mode| 规定动画结束后状态，保持当前状态forwards 回到起始backwards|

根据上面属性我们写一个熊的奔跑效果，

其实就是在雪碧图上面进行跳动，来显示一定范围大小的图片，

准备材料：一张雪碧图片

拆分功能：

• 实现雪碧图在向后移动
• 实现显示的范围大小向右侧移动，移动到一定位置后，不在改变位置
• 综合上面两者

实现功能：雪碧图在向后移动

```javascript

Document