我正在尝试制作一个复杂的动画,所以我制作了下一个简单示例来说明我的问题。
下一个代码尝试让一个对象旋转,在动画的 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;
}
}
最佳答案
一种方法是考虑多个动画,您可以在其中轻松控制每个属性:
.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%
)
关于css - 我可以在帧之间使用填充模式吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53422539/