我可以在帧之间使用填充模式吗？

Question

我正在尝试制作复杂的动画，所以我制作了下一个简单示例来说明我的问题。

下一个代码尝试让一个对象旋转，在动画的 50% 处改变它的颜色并保持到 100%，我遇到的问题是，当它从 50% 变为 100% 时，它不会保留之前的关键帧 (50%)，它会在 100% 时再次变得透明。

我使用过一些动画软件，如 blender 或 animate cc，默认行为是保留在最后一个关键帧中设置的属性，除非您主动将其更改为其他内容。

我知道我可以再次将背景属性设置为 100% 的红色。但是对于一个真正复杂的动画来说，这意味着要重复很多值，我也知道 "animation-fill-mode" 属性如果设置为 "forward"，它会保持动画的最终状态，所以我虽然如果我在每一步都这样做，它会按照我的意愿行事，但它没有用:(

是否有解决此问题的好方法，而不必在每一帧上重复每个属性？我可以更改默认行为吗？

注意：我认为如果没有在每一帧上设置属性它会默认为初始值（0% 帧），但是我没有将任何 "transform:rotate" 属性设置为 50% 并且它没有默认为 0% 的值，因为它在 0% 和 100% 之间插入值，所以我不知道这到底是如何工作的：/，关于为什么会发生这种情况的一些澄清将被真正理解

    .test{
        all: unset;
        animation-name: rotate_and_change_color;
        animation-duration: 3s;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
        animation-direction: normal;
    }



    @keyframes rotate_and_change_color{
        0%{transform: rotate(0deg);
            animation-fill-mode: forwards;  
        }
        50%{
            background: red;
            animation-fill-mode: forwards;  
        }
        100%{transform: rotate(360deg);
            animation-fill-mode: forwards;  
        }
    }

Answer 1

一种方法是考虑多个动画，您可以轻松地控制每个动画属性:

.test {
  animation-name: rotate, change_color;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-direction: normal;
  
  width:200px;
  height:200px;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes change_color {
  50%,
  100% {
    background: red;
  }
}

<div class="test">
</div>

关于您的注释，这仅适用于最后和第一个状态，如果您未指定任何值，将考虑计算值（初始值或元素样式中定义的值）

If a 0% or from keyframe is not specified, then the user agent constructs a 0% keyframe using the computed values of the properties being animated. If a 100% or to keyframe is not specified, then the user agent constructs a 100% keyframe using the computed values of the properties being animated.^ref

对于其他状态，您实际上有一个插值，考虑了您定义的值和自动完成的值（如果您没有定义 0% 和 100%）

我可以在帧之间使用填充模式吗？

Can I have fill-mode between frames?

css

keyframe

css-animations