CSS3旋转动画

无法使此动画图像正常工作,它应该进行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);

}

}

}

回答:

这是 正确的动画CSS:

.image {

position: absolute;

top: 50%;

left: 50%;

width: 120px;

height: 120px;

margin:-60px 0 0 -60px;

-webkit-animation:spin 4s linear infinite;

-moz-animation:spin 4s linear infinite;

animation:spin 4s linear infinite;

}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }

@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }

@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">


有关代码的一些注意事项:

  1. 您已将关键帧嵌套在.image规则中,这是不正确的
  2. float:left 不适用于绝对定位的元素
  3. 看看caniuse:IE10不需要-ms-前缀

以上是 CSS3旋转动画 的全部内容, 来源链接: utcz.com/qa/398468.html

回到顶部