html css3风车,css3 animation实现风车转动

项目中经常有用到动画效果，比如Loading、风车转动等等。最简单的办法是使用gif，但是gif在半透明背景下有白边，体验不友好，好在现在可以使用css3的anmiation来实现动画效果，极大的提升了用户体验。下面是风车转动效果实现demo

风车 - css3动画示例

.windmill {

110px;

height: 160px;

overflow: hidden;

background: url(http://115.29.225.190/fiddle/css3/windmill.png) no-repeat;

-webkit-backface-visibility: hidden;

-webkit-perspective: 1000;

webkit-transform: translate3d(0,0,0);

transform: translate3d(0,0,0);

-webkit-animation: earthDay 2.5s linear infinite;

animation: earthDay 2.5s linear infinite;

}

@keyframes earthDay {

7.99% {

background-position: 0 0;

}

8% {

background-position: 0 -160px;

}

15.99% {

background-position: 0 -160px;

}

16% {

background-position: 0 -320px;

}

23.99% {

background-position: 0 -320px;

}

24% {

background-position: 0 -480px;

}

31.99% {

background-position: 0 -480px;

}

32% {

background-position: 0 -640px;

}

39.99% {

background-position: 0 -640px;

}

40% {

background-position: 0 -800px;

}

47.99% {

background-position: 0 -800px;

}

48% {

background-position: 0 -960px;

}

55.99% {

background-position: 0 -960px;

}

56% {

background-position: 0 -1120px;

}

63.99% {

background-position: 0 -1120px;

}

64% {

background-position: 0 -1280px;

}

71.99% {

background-position: 0 -1280px;

}

72% {

background-position: 0 -1440px;

}

79.99% {

background-position: 0 -1440px;

}

80% {

background-position: 0 -1600px;

}

87.99% {

background-position: 0 -1600px;

}

88% {

background-position: 0 -1760px;

}

99.99% {

background-position: 0 -1760px;

}

100% {

background-position: 0 -160px;

}

}

@-webkit-keyframes earthDay {

7.99% {

background-position: 0 0;

}

8% {

background-position: 0 -160px;

}

15.99% {

background-position: 0 -160px;

}

16% {

background-position: 0 -320px;

}

23.99% {

background-position: 0 -320px;

}

24% {

background-position: 0 -480px;

}

31.99% {

background-position: 0 -480px;

}

32% {

background-position: 0 -640px;

}

39.99% {

background-position: 0 -640px;

}

40% {

background-position: 0 -800px;

}

47.99% {

background-position: 0 -800px;

}

48% {

background-position: 0 -960px;

}

55.99% {

background-position: 0 -960px;

}

56% {

background-position: 0 -1120px;

}

63.99% {

background-position: 0 -1120px;

}

64% {

background-position: 0 -1280px;

}

71.99% {

background-position: 0 -1280px;

}

72% {

background-position: 0 -1440px;

}

79.99% {

background-position: 0 -1440px;

}

80% {

background-position: 0 -1600px;

}

87.99% {

background-position: 0 -1600px;

}

88% {

background-position: 0 -1760px;

}

99.99% {

background-position: 0 -1760px;

}

100% {

background-position: 0 -160px;

}

}

css3 Animation目前浏览器的支持情况：

IE10+

FF31+

Chrome31 - 42支持带-webkit-前缀的，Chrome43+支持标准

Safari7 - 8 支持带-webkit-前缀的

Opera28 - 29支持带-webkit-前缀的，Opera30+支持

iOS Safari7.1 - 8.3支持带-webkit-前缀的