Question

我正在使用一些基本的CSS动画，而我似乎无法弄清楚各种变换的渲染逻辑。如果我执行以下动画，目标将按顺时针顺时针旋转0到350deg。

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(350deg);
  }
}

但是，当我添加其他变换时，旋转开始采用快捷方式（逆时针方向从0到350deg）。如果我从0到360度，这甚至导致没有可见的旋转。这是一个例子：

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: translate(500px) rotate(350deg);
  }
}

中间关键帧解决了一些旋转问题，但在与多个变换一起使用时会更加混乱。

如何解决这个问题 - 也就是说，在这个例子中，如何在不改变旋转行为的情况下向旋转方块添加平移（将短CCW旋转调整为350度而不是像正常情况那样完整的CW旋转没有翻译）？

这是CodePen的一些例子： http://codepen.io/jbjw/pen/gmyajY

Answer 1

我最好的猜测是，它看到0％时，你处于0度。 100％，你是350degrees。这实际上距你开始的地方只有-10度，因此它从一开始就知道它只需旋转（ - ）10度。您可以通过添加50％并同时获取两个变换值来解决此问题： http://codepen.io/anon/pen/PpgNje

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: translate(250px) rotate(175deg)
  }
  100% {
    /* transform: rotate(350deg); */
    transform: translate(500px) rotate(350deg);
  }
}

Answer 2

如果您没有指定rotate(0)的起点，则会按预期进行动画制作。

＆＃13;

div {
  width: 50px;
  height: 50px;
  background-color: green;
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  100% {
    transform: translate(500px) rotate(350deg);
  }
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

＆＃13;

<div></div>

＆＃13;

或者，您可以指定translate(0)起点，它将按预期工作。

＆＃13;

div {
  width: 50px;
  height: 50px;
  background-color: green;
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  0% {
    transform: translate(0) rotate(0deg);
  }
  100% {
    transform: translate(500px) rotate(350deg);
  }
}



body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

＆＃13;

<div></div>

＆＃13;

与动画中的其他变换混合时奇怪的旋转变换行为

2 个答案: