[css3动画教程]：逐帧自适应精灵图

一、animation属性设置

要启用css3动画，就要先了解 animation 属性， animation 属性是一个简写属性，用于设置六个动画属性：

animation-name　　　　　　　规定 @keyframes 动画的名称。

animation-duration　　　　　规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function　　规定动画的速度曲线。默认是 “ease”。

animation-delay　　　　　　　规定在动画开始之前的延迟。

animation-iteration-count　　规定动画应该播放的次数。

animation-direction　　　　　规定是否应该轮流反向播放动画。

animation-play-state　　　　　规定动画是否正在运行或暂停。默认是 “running”。

animation-fill-mode　　　　　规定动画在播放之前或之后，其动画效果是否可见。

逐帧动画最关键的是设置：animation-timing-function 属性为：steps(n,[ start | end ])。

这个n是一个自然数，意思就是把一个动画平均分成n等分，直到平均地走完这个动画，这个要跟linear区别开来，因为linear是把动画作为一个整体，中间没有断点，而steps是把动画分段平均执行开来。step-start等同于steps(1,start)，动画分成1步，动画执行时为开始左侧端点的部分为开始；step-end等同于steps(1,end)：动画分成一步，动画执行时以结尾端点为开始，默认值为end。对此，w3c图解如下：



具体实例解释：假设对它应用 steps(3, start) 和 steps(3, end) ，做出阶跃函数曲线如下：

1、steps(3, start)



steps() 第一个参数将动画分割成三段。当指定跃点为 start 时，动画在每个计时周期的起点发生阶跃（即图中 空心圆 → 实心圆 ）。 由于第一次阶跃发生在第一个计时周期的起点处（0s），所以我们看到的第一步动画（初态）就为 1/3 的状态，因此在视觉上动画的过程为 1/3 → 2/3 → 1 。

2、steps(3， end)



当指定跃点为 end，动画则在每个计时周期的终点发生阶跃（即图中 空心圆 → 实心圆 ）。 由于第一次阶跃发生在第一个计时周期结束时（1s），所以我们看到的初态为 0% 的状态；而在整个动画周期完成处（3s），虽然发生阶跃跳到了 100% 的状态，但同时动画结束，所以 100% 的状态不可视。因此在视觉上动画的过程为 0 → 1/3 → 2/3

二、精灵图的设置

了解了逐帧动画的关键设置，我们再来继续学习精灵图的部分。



用这张精灵图最终实现的效果如下图：



1、首先定义元素的基本css属性

.boxA {
width: 300px;  /*宽高尺寸任意增减*/
height: 100px;
background:url("https://oscdn.geek-share.com/Uploads/Images/Content/202007/14/06e7e9dd29cb400aa109ee375e01df58.png") no-repeat;
background-size: 400% 100%;  /*这项是关键，用来撑开拼凑起来的序列帧，一行4帧图就是400%*/
-webkit-animation: bird-slow .5s steps(3) infinite;  /*发生了3次位移steps就是3*/
animation: bird-slow .5s steps(3) infinite;
}

2、然后定义动画关键帧属性

@keyframes bird-slow {
0% {
background-position: 0% 0%;
}
100% {
background-position: 99% 0%;  /*整张图是100%，3次位移每一次是33%，第三次就是99%*/
}
}
@-webkit-keyframes bird-slow {
0% {
background-position: 0% 0%;
}
100% {
background-position: 99% 0%;
}
}

最后给html元素套用这个class即可看到效果了

更详细教程可以参考：http://www.w3cplus.com/css3/CSS3-animation.html