CSS3自旋动画

• Z时代
• 2024-01-10
• 分类：问答

我已经回顾了很多演示，并且不知道为什么我无法使CSS3自旋起作用。我正在使用最新的稳定版Chrome。

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>

回答：

要使用CSS3动画，您还必须定义实际的动画关键帧（ 您将其命名为spin）

配置了动画的时间后，您需要定义动画的外观。这是通过使用@keyframes规则建立两个或更多关键帧来完成的。每个关键帧描述动画元素在动画序列中给定时间应如何呈现。

@-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);}
}

以上是 CSS3自旋动画 的全部内容， 来源链接： utcz.com/qa/422033.html