一直以来，本人都认为css3的animation只能实现渐变动画，比如高度从0渐变到100px这类的。而无法实现高度从0跳变到50px再跳变到100px这种类似flash的帧动画效果。
但是在看到天才的师姐给的例子之后， 让我愧疚得无地自容，原来还真有css3帧动画的，T_T。这个属性是 timing-function: step-end; 而且firefox、webkit、ie10都有支......
话说上三回，我们用css3的animation让png图片动起来了。
但是美中不足的是，还要画一张图片。如果要求做几个不同大小的菊花，或者要换个颜色，又或者要不同的地方用不同的颜色和大小的菊花，得找到原图(psd之类的)再导出一个不同的size，个人感觉蛋疼死了。
这次咱们用css3来画那几个点，让它能大能小能色，嘿嘿~~(邪恶了)。
先看看效果吧，用鼠标左键狠狠的砸这里。......
上回说到用png图片来做帧动画，总的来说也没什么大问题，但是画个菊花，按固定角度旋转N次做图实在是蛋疼。
既然怎么样都要画个菊花，那不如就用canvas来画算了。对于不支持canvas的浏览器，可以用svg，原理都差不多。
这个canvas动画的原理跟帧动画也类似，先绘制第一帧的画面，然后擦掉，接着绘制第二帧，以此循环。时间间隔短的话看上去就变成动画了。
具体解释请看代码，......
话说上回说到使用css3的animation来制止png格式的菊花，但是目前之后新版的firefox和webkit核心浏览器才支持该动画，那其他浏览器也想用png动画怎么办呢?
这就要提到帧动画的概念了，会flash的都知道，adobe flash软件里有个时间轴和帧的概念，具体解释我就不说了，可以自己google。其原理是事先把一个动画的所有动作的话出来，然后在不同的时间点显示不同的动作......
Loading图，也就是俗称的菊花，大部分网站都会用到，而一般情况用的都是gif动画，但是gif能保存的颜色太少，导致有渐变的图导出来后有毛边，很不美观。
不过随着html5和css3的出炉，我们终于可以把loading做的更加美观啦。
之前用png制作loading动画并不是没有，但是需要使用js以及制作一张包含所有动作的png图片(就像跑马灯一样)，咱不熟ps，画起来相当吃力。......