SVG 动画：告诉关键帧“什么都不做”答案

【问题标题】：SVG animation: telling a keyframe to "do nothing"SVG 动画：告诉关键帧“什么都不做”
【发布时间】：2020-07-16 17:51:45
【问题描述】：

所以我有这个 CSS 动画：

@keyframes a1 {
    25% {
        transform: scale(1.5,1.5);
        stroke: red;
    }
    50% {
        transform: translate(80px,80px) scale(1.5,1.5);
        stroke: green;
    }
    75% {
        transform: rotate(45deg) translate(80px,80px) scale(1.5,1.5);
        stroke: blue;
    }
    100% {
        /* REPEATING MYSELF HERE! */
        transform: rotate(45deg) translate(80px,80px) scale(1.5,1.5);
        stroke: blue;
    }
}
#r1 {
    animation-name: a1;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="test.js"></script>
    <link rel="stylesheet" href="style2.css">
    <title>Test Page</title>
  </head>
  <body>
    <main>
      <svg width="1000px" height="1000px">
        <rect id="r1"
              width="100" height="100" fill="transparent" stroke="black"></rect>
      </svg>
    </main>
  </body>
</html>

它按预期工作。问题是，100% 关键帧只是 75% 关键帧的重复，我不想这样做。但是，如果我省略任何内容，则该属性将重置为动画循环的开始，这不是预期的。

所以我的问题是：

有没有办法告诉 CSS “冻结帧”，这样前一个关键帧就不会发生任何变化？
如果没有，有没有比这更强大的方法来创建相同的动画？

【问题讨论】：

你可以做75%,100% {}
@TemaniAfif 你的意思是用那个替换75% 和100%？我不知道它是如何解决问题的。它没有。
@KhoaVo - Nah, 75%, 100% { transform: rotate(45deg) translate(80px,80px) scale(1.5,1.5); stroke: blue; } 而不是 75 和 100 块，结果与您的版本相同。
@enhzflep 好的，这行得通。您想将其添加为答案以便我接受吗？
@enhzflep 是的，但我必须等待 2 天。我不常来这里，怕我忘记了。不过我还是做到了。

标签： css svg css-animations

【解决方案1】：

@TemaniAfif 和 @enhzflep 在 cmets 中提供了答案：我可以选择两个关键帧，如下所示。

75%, 100% {
    transform: rotate(45deg) translate(80px,80px) scale(1.5,1.5);
    stroke: blue;
}

【讨论】：