Chrome 中的 CSS 动画卡顿

Question

在我们的公司登录页面上，我试图产生“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>

在此先感谢您的任何/所有帮助！

Answer 1

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