一直以来，本人都认为css3的animation只能实现渐变动画，比如高度从0渐变到100px这类的。而无法实现高度从0跳变到50px再跳变到100px这种类似flash的帧动画效果。

但是在看到天才的师姐给的例子之后， 让我愧疚得无地自容，原来还真有css3帧动画的，T_T。这个属性是 timing-function: step-end; 而且firefox、webkit、ie10都有支持，详细介绍可以在这里(https://developer.mozilla.org/en/CSS/timing-function#step-end)看。

跟帧动画有关的timing-funct......

话说上回说到使用css3的animation来制止png格式的菊花，但是目前之后新版的firefox和webkit核心浏览器才支持该动画，那其他浏览器也想用png动画怎么办呢?

这就要提到帧动画的概念了，会flash的都知道，adobe flash软件里有个时间轴和帧的概念，具体解释我就不说了，可以自己google。其原理是事先把一个动画的所有动作的话出来，然后在不同的时间点显示不同的动作，切换的快的话看上去就动起来了。

制作菊花，要先准备一张包含所有菊花状态的图，就像下面这张:

用一个固定大小的窗口显示这张图，定时移动图片的位置，就能让它动起来了。简单的代码......

Loading图，也就是俗称的菊花，大部分网站都会用到，而一般情况用的都是gif动画，但是gif能保存的颜色太少，导致有渐变的图导出来后有毛边，很不美观。

不过随着html5和css3的出炉，我们终于可以把loading做的更加美观啦。

之前用png制作loading动画并不是没有，但是需要使用js以及制作一张包含所有动作的png图片(就像跑马灯一样)，咱不熟ps，画起来相当吃力。

而在html5/css3的带领下，我们又有了两个新的方法: canvas和css动画。

但是我是相当讨厌用js代替css本身就可以实现的功能，而且本人觉得在cavas上画图太累( 这......