Как убрать фриз при появлении блока с background image?

wrapper.classList.add('active__display')
setTimeout(() => {
  wrapper.classList.add('active__opacity')
}, 1)

.wrapper {
  width: 100%;
  height: 100vh;
  justify-content: space-around;
  opacity: 0;
  visibility: hidden;
  display: none;
  transition-property: opacity, visibility;
  transition-duration: .5s;
}

.active__display {
  display: flex;
}

.active__opacity {
  opacity: 1;
  visibility: visible;
}