【疯狂的菊花系列】用CSS3帧动画实现Loading

一直以来,本人都认为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-function有st......

【疯狂的菊花系列】制作PNG帧动画Loading

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

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

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