html - 如何防止CSS动画中的闪烁问题？

Question

我正在尝试使用 CSS @Keyframes 动画制作 slider 。当我第一次使用小尺寸 [1100px 宽度 和 400px 高度] 时，它工作得很顺利。

但是当我为我的网站扩展 slider 和图像大小时，我增加高度和宽度 [1280 * 640]。然后我的图像第一次在每个间隔闪烁，在每个图像第一次闪烁后， slider 工作顺利。

但我想在第一时间阻止它。

CSS:

.slider{
    position: relative;
    top: 0px;
    left: 0px;
    background: url(1.jpg);
    height: 600px; width: 1263.1px;
    margin-bottom: 20px;
    animation: slideshow 10s infinite;
}

@keyframes slideshow{
    25% { background: url(1.jpg); }
    50% { background: url(2.jpg); }
    75% { background: url(3.jpg); }
    100% { background: url(1.jpg); }
}

HTML:

<div class="slider"></div>

Answer 1

那是因为图像还没有加载，它们只在动画开始时才开始加载。为了防止这种闪烁，您可以在 Javascript 中使用 onload 事件:

<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