CSS3连续旋转动画（就像正在加载日d一样）

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

我正在尝试使用PNG和CSS3动画复制Apple风格的活动指示器（日程加载图标）。我使图像旋转并连续进行，但是在动画完成之后似乎有延迟，然后再进行下一个旋转。

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}
#loading img
{
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         0.5s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function: linear;
    }

我尝试过更改动画的持续时间，但是没有什么区别，如果您将其放慢，请说5s，这更明显的是，在第一次旋转之后会有一个暂停，然后再次旋转。我想摆脱的是这个停顿。

非常感谢任何帮助，谢谢。

回答：

您的问题是-webkit-TRANSITION-timing-function您需要时提供了-webkit-ANIMATION-timing-

function。您的0到360的值将正常工作。

以上是 CSS3连续旋转动画（就像正在加载日d一样） 的全部内容， 来源链接： utcz.com/qa/424817.html

回到顶部