Animation keyframes with `display: none;`.

console_ani_keyframes_with_display_none.js

/**
 * Exploring animation keyframes with display `none` etc.
 */

document.body.innerHTML = `
<style>

@keyframes slide-in {
  0% {
    display: none;
    transform: translateX(-100%);
  }
  1% {
    display: block;
    transform: translateX(-100%);
  }
  100% {
    display: block;
    transform: translateX(0);
  }
}

@keyframes slide-out {
  0% {
    transform: translateX(0);
  }
  99% {
    transform: translateX(-100%);
  }
  100% {
    display: none;
    transform: translateX(-100%);
  }
}

body > * + * {
    margin-top: 2rem;
}

.box {
    animation: 250ms ease-in-out slide-out;
    animation-fill-mode: forwards;
    width: 100px;
    height: 100px;
    background: orange;
    border: 3px solid #000;
    font: bold 1rem Arial;
}

.box.visible {
    animation: 250ms ease-in-out slide-in;    
}

.box:not(.positive-z-index) {
    display: none;
}

.box.positive-z-index {
    display: block;
}

</style>

<fieldset>
  <div>
    <label for="checkbox">Checkbox</label>
    <input type="checkbox" id="checkbox" name="checkbox" />
  </div>
</fieldset>

<div class="box">Box</div>`;

var box = $('.box');
var checkbox = $('#checkbox');

checkbox.addEventListener('change', e => {
    const cb = e.currentTarget;
    if (cb.checked) {
        box.classList.add('positive-z-index');
    }
    box.classList.toggle('visible', cb.checked);
});


box.addEventListener('animationend', e => {
    if (!checkbox.checked) {
        box.classList.remove('positive-z-index');
    }
});