CSS Transitions/Transform - "shaky" image in google chrome browser

Question

Recently I'm experiencing a "shaky" screen most likely caused by CSS transition. In fact it does only happen on Chrome Browser (probably also Safari as some ppl also reported it). Any idea how may i make it look smooth? Also, u may notice strange white blocks appear few times, this also didn't happen before i applied transitions and now happens once or twice after the page is freshly loaded.

Here's a link so that you can see what exactly is happening: https://vimeo.com/198493320

CSS Code of transitions:

.heroEffects .bg {
    transform: scale(1);
    -webkit-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78);
    -moz-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78);
    box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
.bgimg {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    transform: scale(1);
    overflow: hidden;
    -webkit-box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85);
    -moz-box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85);
    box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85);
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url("../img/gallery/slonecz.jpg");
    animation-name: backgroundchangeFadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    -webkit-animation-name: backgroundchangeFadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 15s;
}

Answer 1

Actually, I've just found out few ways to make it work fine. First of all, adding -webkit-transform-style: preserve-3d; rule to the flickering element makes it work a little bit more slightly, still in my case it didn't work perfect afterwards (source: https://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit).

What actually worked for me, was to increase the animation-duration rule from 10s to 15s, and instead of 3-step transition i put the following:

@keyframes backgroundchangeFadeInOut {
    0% {
       background-image: url("../img/gallery/slonecz.jpg");
    }
    15% {
       background-image: url("../img/gallery/slonecz.jpg");
    }
    30% {
       background-image: url("../img/gallery/slonecz.jpg");
    }
    45% {
       background-image: url("../img/gallery/slonecz.jpg");
    }
    50% {
       background-image: url("../img/gallery/motyl.jpg");
    }
    65% {
       background-image: url("../img/gallery/motyl.jpg");
    }
    80% {
       background-image: url("../img/gallery/motyl.jpg");
    }
    95% {
       background-image: url("../img/gallery/motyl.jpg");
    }
    100% {
       background-image: url("../img/gallery/slonecz.jpg");
   }
}

Seems like a single transition taking much time causes the browser memory to fail and flicker. Quick transition and displaying original images in between the transitions works good for me. Hope somebody with such issue would also check this out so that we can see if it's multicase solution.

Also, in case of white blocks it appeared to be body showing up for some reason, temporarily changed body background opacity to 0 until i work out another way to solve it.