CSS3 animation的动画效果

实现功能一：

这里想实现一个效果： 如图，外围的圈围绕着中间的圈旋转 

这里其实有两张背景图，外层的带框的背景图和中间的背景图，效果就是外层围绕中间旋转，看起来像一个动画的效果

这里利用到css3的 animation属性，

//html

 <div id="content">
        <div id="img">
        </div>
    </div>

//css
注意：（1）.这里利用了after伪类实现的，伪类必须要有content属性
      （2）.animation的第一个参数，例如这里的rotate ，必须通过keyframes 定义一份，名字一样
      （3）.animation的顺滑动画效果，这里配置了参数 linear 

    @-webkit-keyframes rotate {
        0% {
            -webkit-transform: rotate(0)
        }

        100% {
            -webkit-transform: rotate(360deg)
        }
    }

    @keyframes rotate {
        0% {
            transform: rotate(0)
        }

        100% {
            transform: rotate(360deg)
        }
    }

    #content {
        width: 400px;
        height: 400px;
        margin: 100 auto;
    }

    #img {
        width: 80px;
        height: 80px;
        background: url('sprite-img.png') no-repeat -2303px -652px;
    }

    #img:after {
         display: block;
        width: 80px;
        height: 80px;
        content: