如何使过渡影响在动画中使用的属性?

Question

我不能在'color'上进行过渡，因为这个属性是在启动动画中使用的。然而，'background-color'的行为是应该的。

这是我的CSS:

div{
font-size: 7rem;

animation-name: appearance;
animation-duration: 2s;
animation-fill-mode: forwards;

transition: background-color 2s, color 2s;
}
div:hover{
background-color: black;
color: white;  
animation-fill-mode: none;
}
@keyframes appearance{
0%{
color: white;
}
100%{
color: black;
}
}

JSFiddle显示了我的意思

有什么技巧可以让过渡工作吗?

Answer 1

您需要将其包装到另一个div/section中。您可以在下面找到工作代码片段。

我把它包装成一个section，并给页面加载动画的部分，而悬停效果的div。

section {
animation-name: appearance;
animation-duration: 2s;
animation-fill-mode: forwards;
color: black;
}
div {
font-size: 7rem;
transition: all 2s ease;
}
div:hover {
background-color: black;
color: white;
animation-fill-mode: none;
}
@keyframes appearance {
0% {
color: white;
}
100% {
color: black;
}
}

<section>
<div>
text
</div>
</section>