如何使过渡影响动画中使用的属性？
如何使过渡影响动画中使用的属性？
提问于 2021-08-13 12:04:11
我不能在“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 that demostrates what I mean
有什么让过渡工作的小贴士吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-08-13 13:53:26
您需要将其包装到另一个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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68772018
复制相关文章
相似问题
腾讯云开发者
