CSS3+PNG实现GIF动画效果

昨天讲到了JavaScript+PNG模拟GIF动画，今天教大家用css3 + PNG实现GIF动画效果。代码很简单主要用到了css3的animation属性，代码如下：

1. @-webkit-keyframes loading{
2. 0%{
3. -webkit-transform: rotate(0deg);
4. }
5. 50%{
6. -webkit-transform: rotate(180deg);
7. }
8. 100%{
9. -webkit-transform: rotate(360deg);
10. }
11. }
12. @-moz-keyframes loading{
13. 0%{
14. -moz-transform: rotate(0deg);
15. }
16. 50%{
17. -moz-transform: rotate(180deg);
18. }
19. 100%{
20. -moz-transform: rotate(360deg);
21. }
22. }
23. #loading{
24. -webkit-transform-origin: center center;
25. -webkit-animation-name: loading;
26. -webkit-animation-duration: 1.2s;
27. -webkit-animation-timing-function: linear;
28. -webkit-animation-iteration-count: infinite;
29. -moz-transform-origin: center center;
30. -moz-animation-name: loading;
31. -moz-animation-duration: 1.2s;
32. -moz-animation-timing-function: linear;
33. -moz-animation-iteration-count: infinite;
34. }

用到的图片

效果(chrome、firefox6)：