相关疑难解决方法(0)

我试图通过使用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它更明显的是在第一次旋转之后有一个停顿再次旋转.这是我想要摆脱的暂停.

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

我知道设置变换的方法,但我想设置旋转并保持其他如缩放和倾斜.

也许,我们可以编写一个函数:

// A variable of element, not parameter. separate out it make more clear.
var el = document.getElementById('el');
function setTransform (p_name, p_value) {
  // how to write some code to set the el transform style...
}

而且,我有一个元素:

<div id="el" style="transform: rotate(45deg) skew(45deg);"></div>

对我们来说,我们的函数setTransform:

setTransform('rotate', '30deg');

我希望元素是这样的:

<div id="el" style="transform: rotate(30deg) skew(45deg);"></div>

所以我的问题是如何编写函数setTransform的内容？