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 的眾多動畫庫之一。