css实现图片自动旋转

通过 @keyframes 规则，您能够创建动画。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

  CSS3里面多了很多动画特效方面的css，前几天项目里遇到一个需要，做一个ajax加载时的动画效果（一个圆圈在旋转显示加载中）,在网上搜索了一下找到了解决方案，在jquery的ajax方法里面加一个参数beforeSend,这个里面就是ajax发送前执行的函数，然后可以配合css3的图片旋转，让display:none的图片在这个时候显示display:block。
  那么css3怎么实现图片不停旋转呢，开头引用的w3school里面的文档就很好的说明了。老规矩，先上代码

//css样式
		.loading img{
		  display: inline-block;
		  vertical-align: middle;
		  animation:rotating 1.2s linear infinite; //第一个参数是规定需要绑定到选择器的 keyframe 名称;第二个是规定完成动画所花费的时间，以秒或毫秒计;第三个参数是规定动画的速度曲线(可选值看http://www.w3school.com.cn/cssref/pr_animation-timing-function.asp);
		  width: 100px;
		}
		@keyframes rotating{
		from{transform:rotate(0)}
		to{transform:rotate(360deg)}
		}


//一个div里面有一个图片
<div class="loading">
	<img src="http://pic9.nipic.com/20100916/2531170_131413079748_2.jpg">
</div>

点这里看demo.