CSS Animate 因多帧而失败答案

【问题标题】：CSS Animate fails with multiple framesCSS Animate 因多帧而失败
【发布时间】：2021-09-20 01:32:40
【问题描述】：

这个jsfiddle 显示了两个使用动画的div。第一个更改为我想要的。第二个没有。不同的是，100% 关键帧是在秒中添加的。我添加它是因为 W3Schools 上的这个注释

提示：为了获得最佳浏览器支持，您应该始终定义 0% 和 100% 选择器。

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

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

【问题讨论】：

标签： css animation keyframe

【解决方案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>

【讨论】：

在您的示例中很难看到，但第一个有额外的变化，这就是我想要的。我应用了您的更改并减慢了动画速度。你可以看到它们是不同的。我可以使用附加关键帧获得第一个动画吗？这是更新的 jsfiddle：jsfiddle.net/user3052443/vwLhd43q/15