Chrome 中的 CSS 动画卡顿答案

【问题标题】：CSS animation stutters in ChromeChrome 中的 CSS 动画卡顿
【发布时间】：2021-01-16 08:45:26
【问题描述】：

在我们的公司登录页面上，我正在尝试制作“Ken Burns”效果。给定一系列随机图像，图像会淡入并放大（从不透明度：0 开始），然后快速淡出和缩小（再次，到不透明度：0），并立即被具有相同动画的另一张图像替换。效果设置为持续10秒并无限循环。

效果在 Firefox 中完美运行；然而，在 Chrome 中，图像的随机化与 CSS 动画不同步，旧图像在淡出后重新出现一瞬间，然后被新图像替换。（我会发布一个视频屏幕截图，但我不想泄露公司身份。）Chrome 中可能导致此问题的原因是什么，如何解决？

var numOfImages = 5;
    
if (window.screen.availWidth >= 1250) {
    // Preloading images
    if (!img1) {
        var img1 = new Image();
        img1.src = "/_images/background/1.lowsrc.jpg";
    }
    if (!img2) {
        var img2 = new Image();
        img2.src = "/_images/background/2.lowsrc.jpg";
    }
    if (!img3) {
        var img3 = new Image();
        img3.src = "/_images/background/3.lowsrc.jpg";
    }
    if (!img4) {
        var img4 = new Image();
        img4.src = "/_images/background/4.lowsrc.jpg";
    }
    if (!img5) {
        var img5 = new Image();
        img5.src = "/_images/background/5.lowsrc.jpg";
    }
}

var getRandom = function () {
    var img = document.getElementById('autoImg');
    var r = Math.random();
    r = r * numOfImages;
    r = Math.ceil(r);
    img.src = '/_images/background/' + r + '.lowsrc.jpg';
}

var initAnimation = function () {
    if (window.innerWidth == 1920) {
        getRandom();
        setInterval(getRandom, 10000);
    } else {
        getRandom();
    }
}

window.onload = initAnimation;

@keyframes kb2 {
    0% {
        opacity: 0.01;
        filter: blur(0.5rem);
    }

    10% {
        opacity: 1;
    }

    50% {
        filter: blur(0);
    }

    80% {
        transform: scale3d(1.1, 1.1, 1.1) translate3d( calc(-0.2 * (1400px - (100% - 480px)) / 2), calc(-0.6 * (1495px - 100vh) / 2), 0 );
        animation-timing-function: ease-in;
        opacity: 1;
    }

    95% {
        transform: scale3d(1.25, 1.25, 1.25) translate3d(-72px, -100px, 0);
        animation-timing-function: ease-out;
        opacity: 0.01;
        filter: blur(0);
    }
    100% {
        transform: scale3d(1.25, 1.25, 1.25) translate3d(-72px, -100px, 0);
        animation-timing-function: ease-out;
        opacity: 0;
        filter: blur(0);
    }
}

@media screen and (min-width: 1920px) and (max-height: 1495px) {
    #HeroUnit img {
        animation: kb2 10s infinite;
        transform: translate3d(0, calc(-0.7 * (1495px - 100vh) / 2), 0);
    }
}

<section id="HeroUnit">
    <img id="autoImg" />
    <p><span>Corporate</span><br /><span>Slogan</span></p>
</section>

提前感谢您的任何/所有帮助！

【问题讨论】：

标签： javascript css google-chrome animation

【解决方案1】：

CSS 计时根本不准确，你不能相信它对于 ms 完美的动画。尝试在 JS 中使用回调函数。或者使用 JS 的众多动画库之一。

【讨论】：