CSS3连续旋转动画?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (101)

我想通过使用PNG和CSS3动画复制一个苹果风格的活动指标(loading加载图标)。我有图像旋转和连续进行,但动画完成之前似乎有一个延迟,然后再进行下一个旋转。

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

我试图改变动画的持续时间,但它没有区别,如果你慢下来说5秒更明显,第一次旋转之后有一个暂停再次旋转。这是我想摆脱的这个停顿。

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

提问于
用户回答回答于
用户回答回答于

我的jsfiddle演示了你的动画:

#myImg {
    -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}

也可能更类似于苹果加载图标将是一个动画,转换灰色条纹的不透明度/颜色,而不是旋转图标。

扫码关注云+社区

领取腾讯云代金券