昨天讲到了JavaScript+PNG模拟GIF动画，今天教大家用css3 + PNG实现GIF动画效果。代码很简单主要用到了css3的animation属性，代码如下：
@-webkit-keyframes loading{
0%{
-webkit-transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(180deg);
}
100%{
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes loading{
0%{
-moz-transform: rotate(0deg);
}
50%{
-moz-transform: rotate(180deg);
}
100%{
-moz-transform: rotate(360deg);
}
}
#loading{
-webkit-transform-origin: center center;
-webkit-animation-name: loading;
-webkit-animation-duration: 1.2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-transform-origin: center center;
-moz-animation-name: loading;
-moz-animation-duration: 1.2s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
}
用到的图片
效果(chrome、firefox6)：
