CSS 动画因多帧而失败

Question

此 jsfiddle 使用动画显示了两个 div。第一个变化如我所愿。第二个没有。不同的是，第二个添加了 100% 关键帧。我添加它是因为 W3Schools

上有这个注释

Tip: For best browser support, you should always define both the 0% and the 100% selectors.

这是我正在使用的代码。我该如何编码才能使动画如上图所示？

    <style>
    .rotateOne {
      background-color:yellow;
      animation: rotateOneFrames 2s;
    }   
    @keyframes rotateOneFrames {
      0% {transform: rotate(360deg) scale(-1, 1); }
    }

    .rotateTwo {
      animation: rotateTwoFrames 2s;
    }   
    @keyframes rotateTwoFrames {
      0% {transform: rotate(360deg) scale(-1, 1); }
      100% {transform: rotate(360deg) scale(-1, 1); }   
    }
    </style>

    <div style="width:150px;">
      <div class="rotateOne">
        <div>Line 1</div>
        <div>Line 2</div>
        <div>Line 2</div>
      </div>
      <div class="rotateTwo">
        <div>Line 1</div>
        <div>Line 2</div>
        <div>Line 2</div>
      </div>
    </div>

Answer 1

如果您的 0% 和 100% 值完全相同，它将保持不变。通过将相反的值设置为 100% 来解决它：

.rotateOne {
  background-color:yellow;
  animation: rotateOneFrames 2s;
}   
@keyframes rotateOneFrames {
  0% {transform: rotate(360deg) scale(-1, 1); }
}

.rotateTwo {
  animation: rotateTwoFrames 2s;
}   
@keyframes rotateTwoFrames {
  0% {transform: rotate(360deg) scale(-1, 1); }
  100% {transform: rotate(-360deg) scale(1, 1); } /* opposite values to the initial ones */   
}

<div style="width:150px;">
  <div class="rotateOne">
    <div>Line 1</div>
    <div>Line 2</div>
    <div>Line 2</div>
  </div>
  <div class="rotateTwo">
    <div>Line 1</div>
    <div>Line 2</div>
    <div>Line 2</div>
  </div>
</div>

CSS 动画因多帧而失败

CSS Animate fails with multiple frames

css

animation

keyframe