Блог

Главная - Вопросы по программированию - Анимация CSS заикается в Chrome

Анимация CSS заикается в Chrome

#javascript #css #google-chrome #animation

#javascript #css #google-chrome #Анимация

Вопрос:

На наших корпоративных страницах входа в систему я пытаюсь создать эффект «Кен Бернс». Учитывая серию случайных изображений, изображение будет исчезать и увеличиваться (начиная с непрозрачности: 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>

Заранее спасибо за любую помощь!

Ответ №1:

Синхронизация CSS не совсем точна, и вы не можете доверять ей для ms perfect animations. Попробуйте использовать функции обратного вызова в JS. Или используйте одну из многих библиотек анимации для JS.