css - How can I improve the performance of an animation which changes images of unknown size in a grid? -

i built grid of images (stored in $image), may change in random order random delay. performance okay, long haven't had background-position: center , background-size: cover in it. these attributes images flickers while blending in. how may improve rendering performance?

my scss looks this

@mixin image-tiles() {   // first image   @for $i 1 through $total-image-count {     $firstimg: nth($images, $i);      &.img-#{$i} {       // set default image if animations not defined       background-image: url('../../' + $firstimg);     }      // second image     @for $j 1 through $total-image-count {       // third image       @for $k 1 through $total-image-count {         &.img-#{$i}-#{$j}-#{$k}{           animation-name: random-image-transition-#{$i}-#{$j}-#{$k};         }       }     }   }    @for $d 0 through ($image-shown-duration * 2) - 1 {     &.delayed-by-#{$d} {       animation-delay: 0.5s * $d;     }   }    &.img {     animation-direction: alternate;     animation-duration: $image-shown-duration * 3s, $image-shown-duration * 3s; // 3 stages     animation-iteration-count: infinite;   } }  @for $i 1 through $total-image-count {   $firstimg: nth($images, $i);   @for $j 1 through $total-image-count {     $secondimg: nth($images, $j);     @for $k 1 through $total-image-count {       $thirdimg: nth($images, $k);        @keyframes random-image-transition-#{$i}-#{$j}-#{$k} {         {           background-image: url('../../' + $firstimg);         }          16% {           background-image: url('../../' + $firstimg);         }          23% {           background-image: url('../../' + $secondimg);         }          50% {           background-image: url('../../' + $secondimg);         }          56% {           background-image: url('../../' + $thirdimg);         }          89% {           background-image: url('../../' + $thirdimg);         }          {           background-image: url('../../' + $firstimg);         }       }     }   } }  .tile-teaser-content-wrapper {   margin: 0 auto;   max-width: 80vw;   padding-bottom: 45%;   position: relative;   width: 100%; }  .tile-teaser-content {   bottom: 0;   left: 0;   max-width: 80vw;   position: absolute;   right: 0;   top: 0;    .tile {     @include image-tiles();      background-size: cover;     background-position: center;     float: left;     height: 100% / $tile-per-col-count;     width: 100% / $tile-per-row-count;   } } 

the html be

<div class="tile-teaser-content-wrapper">     <div class="tile-teaser-content">         <div class="tile img img-1 img-1-2-3 delayed-by-0"></div>         <div class="tile img img-4 img-4-5-6 delayed-by-1"></div>         <div class="tile img img-7 img-7-8-9 delayed-by-2"></div>         <div class="tile img img-1 img-1-2-3 delayed-by-3"></div>         <div class="tile img img-4 img-4-5-6 delayed-by-4"></div>         <div class="tile img img-7 img-7-8-9 delayed-by-5"></div>         <div class="tile img img-1 img-1-2-3 delayed-by-1"></div>         <div class="tile img img-4 img-4-5-6 delayed-by-2"></div>         <div class="tile img img-7 img-7-8-9 delayed-by-3"></div>     </div> </div> 

it not performance problem, mode deep that.

the background-image size property of element. when making transition on this, , 2 images have different sizes, browser unable set both dimensions @ same time, , have wrong result.

the usual way solve have 2 elements, each background-image, , play opacity of 1 of them.

by way, animating background image has still poor browser support, reason change approach