Slide Flickering with CSS Transitions

Prevent flicker on webkit-transition of webkit-transform

The solution is mentioned here: iPhone WebKit CSS animations cause flicker.

For your element, you need to set

-webkit-backface-visibility: hidden;

BootStrap Carousel Slide Animation flicker

There could be many issues at play here. But to show you a fully working copy to reference against, here is a JSfiddle of the carousel

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

https://jsfiddle.net/fatchild/j310af6n/13/

Things I would check...

1. I have included all the relevant libraries for bootstrap to work. (see the JSFiddle)
2. Check that the system choppy-ness isn't down to a slow system. Move your code onto something like JSFiddle and compare to mine.
3. Shake your computer whilst screaming.

Weird CSS3 Transition (flickering)

I got rid of the flickering. Add «-webkit-backface-visibility: hidden;» to the elements you are transitioning. Voilà!

How to Prevent flicker problem in css animation?

That's because the images haven't loaded, and they only start loading when the animation starts. To prevent this flickering, you can use the onload event in Javascript:

<div class="slider"></div>
<style>
    .slider{
        background-image: url("1.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        height: 540px;
        width: 960px;
    }
    .slider.loaded{
        animation: slideshow 10s infinite;
    }
    @keyframes slideshow{
        0%{
            background-image: url("1.jpg");
        }
        25%{
            background-image: url("2.jpg");
        }
        50%{
            background-image: url("3.jpg");
        }
        75%{
            background-image: url("4.jpg");
        }
    }
</style>
<script>
    var images = [
        "1.jpg",
        "2.jpg",
        "3.jpg",
        "4.jpg"
    ];
    function loadImg(i){
        if(images[i] != undefined){
            var img = new Image();
            img.src = images[i];
            img.onload = function(){ // detect if image has been loaded
                i++;
                loadImg(i);
            }
        }
        if(images.length == i) // adding class 'loaded' when all images finished with loading
            document.getElementsByClassName("slider")[0].classList.add("loaded");
    }
    loadImg(0);
</script>

NOTE:
I managed to prevent the flickering, but

This only works perfectly in Chrome

Firefox can't animate the images, but the images are still shown

This is absolutely not working in IE / Edge

CSS animation flickering, tried all tricks I could find

Try changing the animation start delay to 0 in the css:

.animationComplete {
  animation-name: complete;
  animation-delay: 0s;
  animation-duration: 1.0s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

---

Related Topics