Question

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

下一个代码将尝试使对象旋转，以动画的50％改变其颜色，并保持到100％，我遇到的问题是，当它从50％更改为100％时，它没有保持先前的关键帧（50％），而是再次变为100％透明。

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

我知道我可以再次将background属性设置为100％的红色。但是对于真正复杂的动画，这意味着要重复很多值，我也知道“ animation-fill-mode”属性，如果将其设置为“ forward”，它会保留动画的最终状态，所以我虽然说如果我在每个步骤中都这样做，它将表现出我所希望的行为，但是没有用：（

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

注意：我认为，如果未在每个帧上设置属性，则默认为初始值（0％帧），但是我没有在50％处设置任何“ transform：rotate”属性，并且未默认设置为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>

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

如果未指定0％或来自关键帧，则用户代理将使用动画属性的计算值构造0％关键帧。如果未指定100％或关键帧，则用户代理将使用正在设置动画的属性的计算值构造100％关键帧。^ref

对于其他状态，实际上您可以进行插值，考虑到您定义的值并自动完成（如果您未定义0%和100%的值）

帧之间可以有填充模式吗？

1 个答案: