CSS属性animation添加动画特性

@keyframe关键帧：动画的原理就是一定时间内播放多张图片，关键帧即某时间节点上的页面

transform：定义元素2D或3D的变化

translate(x,y) x和y方向上的位置偏移

scale(x,y) x和y方向上的缩放 

rotate(angle)二维坐标上的旋转

skew(Xangle,Yangle)  x和y方向上的倾斜

以上属性对应有x,y,z以及3D属性

DOM

<div id="animation" ></div>

CSS

    <style type="text/css">

      #animation {

        width: 200px;

        height: 200px;

        background: yellowgreen;

        animation: xuan 5s infinite;

      }

      @keyframes xuan{

        from { transform:rotate(0deg);  }

        to { transform:rotate(359deg);  }

      }

    </style>

兼容性

Firefox 支持替代的 @-moz-keyframes 规则。

Opera 支持替代的 @-o-keyframes 规则。

Safari 支持替代的 @-webkit-keyframes 规则。

Chrome 支持 @keyframe