CSS多关键帧动画失效问题：添加100%关键帧后如何实现预期效果

CSS @keyframes 存在默认补全规则：如果仅定义了0%关键帧、未定义100%关键帧，浏览器会自动将元素的默认初始样式（未加动画时的transform状态transform: none）作为100%关键帧的样式。
你的第一个动画仅配置了0%关键帧（状态为transform: rotate(360deg) scale(-1, 1)），动画会从该状态平滑过渡到默认的无变换状态，所以能看到正常的旋转+翻转动效。
而第二个动画的0%和100%关键帧配置完全相同，动画起止状态没有任何差异，自然看不到任何动效。

你只需要将第二个动画的100%关键帧样式调整为元素的默认transform状态即可，既满足了同时定义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%帧设置为元素默认的无变换状态即可 */
  100% {transform: none; }   
}
</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>

内容的提问来源于stack exchange，提问作者user3052443