0

This is a simplified version of something I'm trying to implement. When a label is clicked, it toggles a checkbox and causes an overlay to appear using display:block and fade in. In the overlay is another label which is supposed to do the same thing in reverse. However, the overlay doesn't fade out, but vanishes abruptly.

I've been fiddling with normal/reverse and forwards/backwards but nothing changes. I know this is just some detail of how CSS animations work, but it's just not clear to me how to reverse the animation when the #toggle is unchecked.

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>
Blazemonger
  • 90,923
  • 26
  • 142
  • 180

1 Answers1

0

I think it has to do with using display: none and display: block. Why don't you use transition and opacity instead? It is much simpler

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>
cocoa
  • 3,806
  • 7
  • 29
  • 56