css3实现div的旋转

在做页面加载时需要一个转圈的loading字体图标，所以需要用到css3的旋转
最后在网上查找出来，所以记录一下

<div class="Loading"><span class="iconfont icon-loading"></span></div>
<style>
.Loading {
  text-align: center;     
  padding: 5px 5px;     
}
.Loading .iconfont{
  display: inline-block;
  animation: rotate 1s linear infinite;
}
@keyframes rotate{
  from{transform: rotate(0deg)}
  to{transform: rotate(360deg)}
}
</style>

@keyframes(动画名称){这里面的内容代表着动画如何去动}

具体的兼容问题还有可以查看
http://caibaojian.com/css3/rules/@keyframes.htm

@-moz-keyframes  rotate{
  from{transform: rotate(0deg)}
  to{transform: rotate(360deg)}
}
@-o-keyframes rotate{
  from{transform: rotate(0deg)}
  to{transform: rotate(360deg)}
}
@-webkit-keyframes rotate{
  from{transform: rotate(0deg)}
  to{transform: rotate(360deg)}
}
@keyframes rotate{
  from{transform: rotate(0deg)}
  to{transform: rotate(360deg)}
}

在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
如何捆绑呢？
就是在你需要的div中添加animation属性，该属性一般都会有这两个值

1. 规定动画名称
2. 规定动画时长
   如果想要查看animation的所有属性，看看下面这个
   http://caibaojian.com/css3/properties/animation/animation.htm