为什么当初始状态使用"display: none"时，使用动画属性对不透明度进行动画处理?

Question

使用animation

下面对最初设置为display: none;.child时的不透明度进行动画处理。

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/这里是相关部分：

"主要区别在于，虽然过渡在属性值更改时隐式触发(例如，当悬停时属性值更改时(，但在应用动画属性时显式执行动画。">

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

以下是设置display: block后关于display: none和过渡的相关答案(如用户 David 的评论中所述(： 从显示无更改为阻止时过渡不起作用