Блок отображения анимации для отображения нет - CSS

Question

Отображение Нет, чтобы отобразить Блок анимация работает, но мне нужна анимация, чтобы работать так же - Блок отображения анимации для отображения Нет

анимация не работает, когда действие go из блока в Дисплей отсутствует

есть представление, в чем может быть проблема?

#dboldDiv,#dbnewDiv {
 animation: anim .4s ease-in-out;
}
@keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

Answer 1

отображение не является анимируемым свойством

---

Существует две категории свойств анимируемые и не анимируемые

Вы можете проверить анимированный список свойств здесь:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Answer 2

display:none не будет работать гладко. Для быстрого исчезновения попробуйте использовать visibility:hidden, или, если просто оставить непрозрачность 0 и добавить pointer-events:none, чтобы объект не перехватывал никаких событий мыши.

document.getElementById('hide').addEventListener('click', function(){
  document.getElementById('link').className = 'hide';
});

document.getElementById('show').addEventListener('click', function(){
  document.getElementById('link').className = 'show';
});

document.getElementById('link').addEventListener('click', function(){
  alert('clicked');
});

#link {
  display:block;
}
#link.show {
  animation: anim1 .4s;
  animation-fill-mode: forwards;
}
#link.hide {
  animation: anim2 .4s;
  animation-fill-mode: forwards;
  animation-direction: reverse;
}

@keyframes anim1 {
  0% {
    opacity: 0.3;
    pointer-events:none;
  }
  100% {
    opacity: 1;
    pointer-events:all;
  }
}
@keyframes anim2 {
  0% {
    opacity: 0.3;
    pointer-events:none;
  }
  100% {
    opacity: 1;
    pointer-events:all;
  }
}

<button id="hide">Hide</button>
<button id="show">Show</button>
<a href="#" id="link">hidding &amp; showing</a>