CSS动画淡入，但不会淡出[重复]答案

【问题标题】：css animation fades in, but won't fade out [duplicate]CSS动画淡入，但不会淡出[重复]
【发布时间】：2016-01-21 01:07:45
【问题描述】：

这是我正在尝试实现的简化版本。当单击label 时，它会切换一个复选框并使用display:block 出现覆盖并淡入。在覆盖中是另一个label，它应该反过来做同样的事情。然而，覆盖并没有淡出，而是突然消失。

我一直在摆弄normal/reverse 和forwards/backwards，但没有任何改变。我知道这只是 CSS 动画如何工作的一些细节，但我不清楚当 #toggle 未选中时如何反转动画。

http://jsfiddle.net/mblase75/5cnsn38L/

@keyframes fadein {
    0% {
        opacity: 0;
        display: none;
    }
    1% {
        opacity: 0;
        display: block;
    }
    100% {
        opacity: 1;
        display: block;
    }
}
#toggle {
    display: none;
}
label {
    cursor: pointer;
}
.overlay {
    position: absolute;
    background: green;
    width: 100%;
    display: none;
    animation: fadein ease-in 0.6s 1 reverse forwards;
}
#toggle:checked ~ .overlay {
    animation: fadein ease-in 0.6s 1 normal forwards;
    display: block;
}

<input type="checkbox" id="toggle">
<div class="overlay"> 
    <br><br><br><br><br><br>
    <label for="toggle">Click to deactivate</label>
</div> 
<label for="toggle">Click to activate</label>

【问题讨论】：

标签： css css-animations

【解决方案1】：

我认为这与使用 display: none 和 display: block 有关。为什么不使用transition 和opacity 来代替？简单多了

label {
    cursor: pointer;
}
.overlay {
    position: absolute;
    background: green;
    width: 100%;
    opacity: 0;
    transition: opacity ease-in 0.6s;
}
#toggle:checked ~ .overlay {
    opacity: 1;
}

<input type="checkbox" id="toggle">
<div class="overlay"> 
    <br><br><br><br><br><br>
    <label for="toggle">Click to deactivate</label>
</div> 
<label for="toggle">Click to activate</label>

【讨论】：

因为零不透明度元素仍会阻止用户点击其下方的元素。
@Blazemonger - 使用指针事件：无；让点击通过其他元素之上的元素。