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{

    position:absolute;

    width:114px;

    height:114px;

    top:400px;

    margin:0 auto;

    margin-left:-195px;

    z-index:0;

    -webkit-transition-duration: 0.8s;

    -moz-transition-duration: 0.8s;

    -o-transition-duration: 0.8s;

    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;

    -moz-transition-property: -moz-transform;

    -o-transition-property: -o-transform;

     transition-property: transform;

     overflow:hidden;

}

.knoop1:hover img{

    -webkit-transform:rotate(360deg);

    -moz-transform:rotate(360deg); 

    -o-transform:rotate(360deg);

}