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

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 that demostrates what I mean

有什么技巧可以使转换工作正常进行吗？

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>