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

I built a grid of images (stored in $image), which may change in a random order with a random delay. The performance was okay, as long as I haven't had background-position: center and background-size: cover in it. Now with these attributes the images flickers while blending in. How may I improve the rendering performance?

My scss looks like this

@mixin image-tiles() { // First image @for $i from 1 through $total-image-count { $firstImg: nth($images, $i); &.img-#{$i} { // set the default image if animations are not defined background-image: url('../../' + $firstImg); } // Second image @for $j from 1 through $total-image-count { // Third image @for $k from 1 through $total-image-count { &.img-#{$i}-#{$j}-#{$k}{ animation-name: random-image-transition-#{$i}-#{$j}-#{$k}; } } } } @for $d from 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; // three stages animation-iteration-count: infinite; } } @for $i from 1 through $total-image-count { $firstImg: nth($images, $i); @for $j from 1 through $total-image-count { $secondImg: nth($images, $j); @for $k from 1 through $total-image-count { $thirdImg: nth($images, $k); @keyframes random-image-transition-#{$i}-#{$j}-#{$k} { from { 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); } to { 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 would 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>

-------------Problems Reply------------

It is not a performance problem, it is mode deep than that.

the background-image size is a property of the element. When you are making a transition on this, and the 2 images have different sizes, the browser is unable to set both dimensions at the same time, and so you have a wrong result.

The usual way to solve this is to have 2 elements, each with a background-image, and play with the opacity of one of them.

By the way, animating a background image has still poor browser support, so this is another reason to change your approach

Category:css Views:2 Time:2018-03-11

Related post

Copyright (C), All Rights Reserved.

processed in 0.188 (s). 11 q(s)