css动画淡入，但不会淡出

Question

这是我试图实施的简化版本。单击label时，它会切换一个复选框，并使用display:block和淡入显示叠加层。在叠加层中是另一个label，它应该反向执行相同的操作。但是，叠加层不会淡出，但会突然消失。

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

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

＆＃13;

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我认为这与使用display: none和display: block有关。为什么不使用transition和opacity呢？它更简单

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;