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

【问题标题】：How to make transition affect property that is used in animation?如何使过渡影响动画中使用的属性？
【发布时间】：2021-10-16 16:28:20
【问题描述】：

我无法对“颜色”进行转换，因为此属性用于启动动画。然而，“背景颜色”的行为应该如此。

这是我的 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

有什么技巧可以让过渡顺利进行吗？

【问题讨论】：

您需要在此处在您的问题中发布minimal reproducible example，并在任何其他网站上发布not a link。

标签： css animation transition

【解决方案1】：

您需要将其包装到另一个 div/section 中。您可以在下面找到工作的 sn-p。

我已将其包装成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>

【讨论】：