Question

所以我有这个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“冻结框架”，以使上一个关键帧没有变化？
如果没有，是否有比这更强大的方法来创建相同的动画？

Answer 1

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

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

SVG动画：告诉关键帧“不执行任何操作”

1 个答案: