CSS3旋转动画

Question

<img class="image" src="" alt="" width="120" height="120">

无法让这个动画图像工作，它应该做360度旋转。

我想下面的CSS有些不对劲，因为它只是保持不动。

.image {

    float: left;

    margin: 0 auto;

    position: absolute;

    top: 50%;

    left: 50%;

    width: 120px;

    height: 120px;

    margin-top: -60px;

    margin-left: -60px;

    -webkit-animation-name: spin;

    -webkit-animation-duration: 4000ms;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;

    -moz-animation-duration: 4000ms;

    -moz-animation-iteration-count: infinite;

    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;

    -ms-animation-duration: 4000ms;

    -ms-animation-iteration-count: infinite;

    -ms-animation-timing-function: linear;

    animation-name: spin;

    animation-duration: 4000ms;

    animation-iteration-count: infinite;

    animation-timing-function: linear;

    @-ms-keyframes spin { 

        from { 

            -ms-transform: rotate(0deg); 

        } to { 

            -ms-transform: rotate(360deg); 

        }

    }

    @-moz-keyframes spin { 

        from { 

            -moz-transform: rotate(0deg); 

        } to { 

            -moz-transform: rotate(360deg); 

        }

    }

    @-webkit-keyframes spin { 

        from { 

            -webkit-transform: rotate(0deg); 

        } to { 

            -webkit-transform: rotate(360deg); 

        }

    }

    @keyframes spin { 

        from { 

            transform: rotate(0deg); 

        } to { 

            transform: rotate(360deg); 

        }

    }

}

Answer 1

我有一个旋转图像使用与你相同的东西：.knoop1 img{&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; width:114px;&nbsp; &nbsp; height:114px;&nbsp; &nbsp; top:400px;&nbsp; &nbsp; margin:0 auto;&nbsp; &nbsp; margin-left:-195px;&nbsp; &nbsp; z-index:0;&nbsp; &nbsp; -webkit-transition-duration: 0.8s;&nbsp; &nbsp; -moz-transition-duration: 0.8s;&nbsp; &nbsp; -o-transition-duration: 0.8s;&nbsp; &nbsp; transition-duration: 0.8s;&nbsp; &nbsp; -webkit-transition-property: -webkit-transform;&nbsp; &nbsp; -moz-transition-property: -moz-transform;&nbsp; &nbsp; -o-transition-property: -o-transform;&nbsp; &nbsp; &nbsp;transition-property: transform;&nbsp; &nbsp; &nbsp;overflow:hidden;}.knoop1:hover img{&nbsp; &nbsp; -webkit-transform:rotate(360deg);&nbsp; &nbsp; -moz-transform:rotate(360deg);&nbsp;&nbsp; &nbsp; -o-transform:rotate(360deg);}