防止@keyframe transform: rotate()在动画周期结束时跳过其初始transform: rotate()值

Question

我正在尝试将元素从其起始旋转点旋转360度，而不是从0deg。例如，如果起点是90deg，它将从90deg旋转到90deg (完整的圆)。

我的目标是使用一个简单的@keyframe动画来旋转元素，而不是使用JS进行动画。我目前正在通过JS设置元素的初始转换，如下所示：

this.$element.css({
    transform: 'rotate' + startingDegreePosition + 'deg)'
});

问题是，当动画开始时，它只在其开始位置和关键帧的结束位置之间进行动画。我希望使用1turn值可以适应这一点，但它似乎没有像我预期的那样工作。我想让它离起点360度。我的感觉是这是不可能的，但我想我还是把它扔出去吧。

示例代码：

http://jsbin.com/jayedi/1/edit

您可以在示例中看到，它将从起点旋转到360deg，然后再次回到起点，跳过最后的90度。我正在寻找一个平滑的360度旋转从它的起点。

Answer 1

对于90度，你需要从-90度旋转到+90度。我知道您希望将90deg设置为动态的，而不是固定值。在这种情况下，您还必须更新您的@keyframes rotate css。这需要一些工作；您可以在一个单独的css文件中定义关键帧css，然后通过js读取css文件内容，并在运行时使用js修改它的内容。以下是如何从js:http://jsfiddle.net/russelluresti/RHhBz/3/动态更改@keyframe css的jsfiddle链接

​

div {
  width: 10px;
  height: 40px;
  background-color: thistle;
  animation: rotate 2s linear infinite;
}
@keyframes rotate {
  /*     to { transform: rotateZ(1turn); } */
  from {
    transform: rotateZ(-90deg);
  }
  to {
    transform: rotateZ(90deg);
  }
}
/*///*/

html,
body {
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div style="transform: rotateZ(90deg)"></div>
</body>

</html>

​