How to remove the frieze when a block with a background image appears?

Question

css

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;
}

.row1 .img:nth-child(1){
  background-image: url('/static/img/1.jpg');
}

.row1 .img:nth-child(2){
  background-image: url('/static/img/2.jpg');
}

.row2 .img:nth-child(1){
  background-image: url('/static/img/3.jpg');
}

.row2 .img:nth-child(2){
  background-image: url('/static/img/4.jpg');
}