CSS3旋转动画
CSS3旋转动画
提问于 2013-02-14 01:25:14
我已经审查了相当多的演示，我不知道为什么我不能让CSS3旋转功能。我使用的是Chrome的最新稳定版本。
小提琴：http://jsfiddle.net/9Ryvs/1/
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation-name: spin;
-webkit-animation-duration: 40000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 40000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 40000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-transition: rotate(3600deg);
}<div></div>
回答 7
Stack Overflow用户
发布于 2015-07-30 17:56:59
在最新的Chrome/FF和IE11上，不需要使用-ms/-moz/-webkit前缀。以下是一个较短的代码(基于前面的答案)：
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
/* The animation part: */
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}Stack Overflow用户
发布于 2017-06-05 23:00:58
HTML的字体-令人敬畏的字形图标。
<span class="fa fa-spinner spin"></span>CSS
@-moz-keyframes spin {
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
to {transform:rotate(360deg);}
}
.spin {
animation: spin 1000ms linear infinite;
}Stack Overflow用户
发布于 2019-08-28 14:39:05
唯一能给出正确359deg的答案是：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(359deg); }
}
&.active {
animation: spin 1s linear infinite;
}这里有一个有用的梯度，这样你就可以证明它是旋转的(如果它是一个圆)：
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14859322
复制相关文章
相似问题
腾讯云开发者
