当初始状态使用display：none时，为什么使用animation属性为不透明度动画工作？

Question

使用animation

以下内容将.child的初始不透明度设置为display: none;。

body {
  margin: 0;
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

.wrapper {
  width: 100vw;
  height: 100vh;
}

.wrapper .child {
  width: 200px;
  height: 200px;
  background-color: red;
  display: none;
}

.wrapper:hover .child {
  display: block;
  animation: fadeOut 1s ease forwards;
}

<div class="wrapper">
  <div class="child">

  </div>
</div>

尝试使用transition代替animation无效。

使用transition

body {
  margin: 0;
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

.wrapper {
  width: 100vw;
  height: 100vh;
}

.wrapper .child {
  width: 200px;
  height: 200px;
  background-color: red;
  display: none;
}

.wrapper:hover .child {
  display: block;
  transition: opacity 1s ease;
  opacity: 0;
}

<div class="wrapper">
  <div class="child">

  </div>
</div>

这在animation情况下如何起作用，为什么在transition情况下不起作用？

Answer 1

添加答案以帮助将来的访问者。

通过此链接：https://tympanus.net/codrops/css_reference/keyframes/这里是相关部分：

“主要区别在于，当属性值更改时（例如，当悬停时属性值更改），转换会隐式触发，而在应用动画属性时会显式执行动画。” < / p>

这是transition和animation之间的重要区别。

以下是有关display: none的相关答案，并且在设置了display: block之后过渡（如用户David的评论中所述）：Transition not working when changing from display none to block