时间戳

首页 > 解决方案 > 如何防止css动画中的闪烁问题？

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

问题描述

我正在尝试使用 CSS @KeyframesAnimation 制作滑块。当我第一次使用小尺寸 [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>

标签： htmlcss

解决方案

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

推荐阅读