gpt4 book ai didi

css - 为什么 CSS 动画会将对象的颜色重置为原始颜色?

转载 作者:行者123 更新时间:2023-11-28 14:46:23 25 4
gpt4 key购买 nike

我正在玩 CSS 动画,让一些文本从一种颜色变为另一种颜色。这会起作用,但它会以将文本恢复为文本的原始颜色而结束。这是怎么回事,我该如何阻止它发生?

body {
background-color: black;
color: red;
}

#l0 {
animation-name: fadein;
animation-duration: 4s;
animation-timing-function: linear;
}

@keyframes fadein {
from {
color: black;
}
to {
color: white;
}
}
<body id="l0">
<h1>
Hello
</h1>
</body>

我是否还必须将对象的类别设置为“保持这种颜色”?

最佳答案

这是动画的默认行为,要使动画元素保留最后一个值,您必须设置 animation fill mode像这样转发

animation-fill-mode: forwards

body {
background-color: black;
color: red;
}

#l0 {
animation-name: fadein;
animation-duration: 4s;
animation-timing-function: linear;
animation-fill-mode: forwards
}

@keyframes fadein {
from {
color: black;
}
to {
color: white;
}
}
<body id="l0">
<h1>
Hello
</h1>
</body>

关于css - 为什么 CSS 动画会将对象的颜色重置为原始颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52267535/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com