小编典典

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

css

我正在尝试使用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,这更明显的是,在第一次旋转之后会有一个暂停,然后再次旋转。我想摆脱的是这个停顿。

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


阅读 726

收藏
2020-05-16

共1个答案

小编典典

您的问题是-webkit-TRANSITION-timing-function您需要时提供了-webkit-ANIMATION-timing- function。您的0到360的值将正常工作。

2020-05-16