Html 如何防止css动画中的闪烁问题？

我正在尝试使用CSS

@关键帧

动画制作滑块。当我第一次使用小尺寸[

1100px宽度

和

400px高度

]时，它运行平稳

但当我为我的网站扩展滑块和图像大小时，我会增加高度和宽度[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); }
}

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

HTML:

.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); }
}

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

---

这是因为图像尚未加载，只有在动画开始时才开始加载。为了防止这种闪烁，可以在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>

.滑块{
背景图片：url（“1.jpg”）；
背景重复：无重复；
背景尺寸：封面；
高度：540px；
宽度：960px；
}
.已加载{
动画：幻灯片放映10秒无限；
}
@关键帧幻灯片放映{
0%{
背景图片：url（“1.jpg”）；
}
25%{
背景图片：url（“2.jpg”）；
}
50%{
背景图片：url（“3.jpg”）；
}
75%{
背景图片：url（“4.jpg”）；
}
}
变量图像=[
“1.jpg”，
“2.jpg”，
“3.jpg”，
“4.jpg”
];
函数加载img（i）{
if（图像[i]！=未定义）{
var img=新图像（）；
img.src=图像[i]；
img.onload=函数（）{//检测图像是否已加载
i++；
loadImg（i）；
}
}
if（images.length==i）//在所有图像加载完成时添加类'loaded'
document.getElementsByClassName（“滑块”）[0].classList.add（“已加载”）；
}
loadImg（0）；

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

这只适用于Chrome

Firefox无法设置图像动画，但图像仍会显示

这在IE/Edge中绝对不起作用

---

看一下标签。注意：。它不起作用……您是否有任何仅使用css的解决方案，或者没有任何其他方法。。。。我刚开始学习Javascript。这是在动画开始之前正确加载图像的唯一方法。使用Javascript，您可以处理onload事件和许多其他事情。我建议您学习Javascript，因为它提供了很多机会！