我想教你写一个会眨眼会扭屁股的奶牛动画

这是一个会眨眼会扭屁股的顽皮奶牛，其实这个动画用的只有2个知识点，一个是帧，一个是CSS3动画中的steps(num,start/end)函数。

先讲一下知识点：

1.帧

这个概念可能在电影和电视制作中经常听到（电视制式是每秒25帧,电影所用的是胶片,固定的是24帧每秒），这里的帧其实就是雪碧图上若干个小图，每个小图可以看做一个帧，当然不知道这样比喻是不是足够合理。

2.steps(num,start/end)

第一个参数指定了时间函数中的间隔数量（必须是正整数），可以理解为每两个帧之间走几步；第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。

3.具体案例分析

这个奶牛的大图，很明显是每两个帧之间走一步，所以我们的num改成1；然后，奶牛在完整整个动作之后，要再回到起初第一帧的位置，所以我们设置第二个参数为start，而不是end。

可以直接用这个图做，虽然是jpg的

讲解结束，有没有觉得很简单？可以自己试试哦！

下面上代码，因为兼容性问题，需要加兼容前缀，这里为了节省空间就没写，自己加一下！

HTML代码：

CSS3代码：

最后给大家留2个思考：

1.假设我把雪碧图改成如下情况，又该如何写？（效果和上面是一样的）

这个比上面的简单哦

2.如何制作苹果人向你招手动画（图在这）？

跟问题1的逻辑差不多

可以留言写出你的代码，觉得好玩的，记得给出你的“❤”哦！