I'm expanding a div with transition when the checkbox is selected. But when I deselect the checkbox, the div disappears without transition. I need help with transitioning the div away.

Thank you in advance.

.navigation {
  background-color: rgba(red, .8);
  float: left;
  width: 100vw;
  z-index: 2000;
  transition: .5s ease-in-out;
}

.navigation__checkbox {
  z-index: 2500;
}
.navigation__background {
  height: 100vh;
  width: 0;
  right: 0;
  top: 0;
  position: fixed;
  background-image: unset;
  z-index: 1000;
  transition: width .3s ease-in-out;
}

 
.navigation__checkbox:checked ~ .navigation__background {
  background-image: linear-gradient(blue, gray);
  width: 90%;
  /*transition: width .5s ease-in-out;*/
}

<div class="navigation" id="navigation">


  <input type="checkbox" class="navigation__checkbox" id="nav-toggle" />
  <label for="nav-toggle" class="navigation__button" id="navigation-button">
        <span class="navigation__icon">&nbsp;</span>
    </label>

  <div class="navigation__background">&nbsp;</div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

The property unset on background-image will not work with transition. You have to set your gradient on .navigation__background and only transition the width:

.navigation {
  background-color: rgba(red, .8);
  float: left;
  width: 100vw;
  z-index: 2000;
  transition: .5s ease-in-out;
}

.navigation__checkbox {
  z-index: 2500;
}

.navigation__background {
  height: 100vh;
  width: 0;
  right: 0;
  top: 0;
  position: fixed;
  background-image: linear-gradient(blue, gray);
  z-index: 1000;
  transition: width .3s ease-in-out;
}

 
.navigation__checkbox:checked ~ .navigation__background {
  width: 90%;
}

<div class="navigation" id="navigation">
  <input type="checkbox" class="navigation__checkbox" id="nav-toggle" />
  <label for="nav-toggle" class="navigation__button" id="navigation-button">
    <span class="navigation__icon">&nbsp;</span>
  </label>

  <div class="navigation__background">&nbsp;</div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>