我想要一个无限旋转 360 度的元素。这是我的代码:
.rotate-animation {
-webkit-animation: rotate 2s linear 0 infinite normal;
-moz-animation: rotate 2s linear 0 infinite normal;
-o-animation: rotate 2s linear 0 infinite normal;
-ms-animation: rotate 2s linear 0 infinite normal;
animation: rotate 2s linear 0 infinite normal;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-o-keyframes rotate {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
@-ms-keyframes rotate {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
它只适用于 Webkit 浏览器。我做错了什么?
最佳答案
您还必须用零 0
定义秒。像这样:
-moz-animation: rotate 2s linear 0s infinite normal;
代替这个
-moz-animation: rotate 2s linear 0 infinite normal;
关于animation - CSS 旋转动画仅适用于 Webkit,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9554922/