Question

我正在尝试将元素从其起始旋转点旋转360度，而不是从0deg旋转。例如，如果起点为90deg，则会从90deg转为90deg（整圆）。

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

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

问题在于，当动画开始时，它仅在其起始位置和关键帧的结束位置之间进行动画处理。我希望使用1turn值可以容纳这个，但它似乎没有达到预期的效果。我希望它从起点开始是360度。我的感觉是，这是不可能的，但我想我还是会把它扔出去。

示例代码：

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

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

Answer 1

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

＆＃13;

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

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div style="transform: rotateZ(90deg)"></div>
</body>

</html>

＆＃13;

阻止@keyframe变换：rotate（）跳过其初始变换：在其动画循环结束时的rotate（）值

1 个答案: