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

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