Question

我正在尝试使用CSS @Keyframes动画制作滑块。当我第一次以小尺寸[1100px width和400px height]使用它时，它可以平稳运行。

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

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

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>

注意：   我设法防止了闪烁，但是

这仅在Chrome中完美运行

Firefox无法为图像设置动画，但是图像仍然显示

这绝对不能在IE / Edge中工作

如何防止CSS动画出现闪烁问题？

1 个答案: