我正在尝试使用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的值将正常工作。
-webkit-TRANSITION-timing-function
-webkit-ANIMATION-timing- function