CSS ключевые кадры разной скорости в разных браузерах - PullRequest
0 голосов
/ 02 октября 2018

Я создаю эффект с ключевыми кадрами, который увеличивает масштаб изображения, а также перемещает его (эффект Кена Бернса).

Все работает, пока я не использую другие браузеры.В Chrome он довольно медленный и с той скоростью, с которой я хочу, но в Firefox анимация работает намного быстрее.Я установил временной интервал на 30 с.

    .image-kenburns {
    overflow: hidden;
    position: relative;
    z-index: -1;
    animation: kenburns 30s linear infinite;
    height: 270px;
    width: 100%;
}

@keyframes kenburns {


    0% {
         transform: scale(1.0);
         -ms-transform: scale(1.0);
         -webkit-transform: scale(1.0);
         -o-transform: scale(1.0);
         -moz-transform: scale(1.0);
        background-position: top center;
     }

    50% {
        -webkit-transform-origin: bottom right;
        -moz-transform-origin: bottom right;
        -ms-transform-origin: bottom right;
        -o-transform-origin: bottom right;
        transform-origin: bottom right;
        transform: scale(1.1);
        -ms-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -o-transform: scale(1.1);
        -moz-transform: scale(1.1);
        background-position: bottom center;
    }

    75% {
        -webkit-transform-origin: bottom center;
        -moz-transform-origin: bottom center;
        -ms-transform-origin: bottom center;
        -o-transform-origin: bottom center;
        transform-origin: bottom center;
        transform: scale(1.1);
        -ms-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -o-transform: scale(1.1);
        -moz-transform: scale(1.1);
        background-position: bottom center;
    }



    100% {
        transform: scale(1.0);
        -ms-transform: scale(1.0);
        -webkit-transform: scale(1.0);
        -o-transform: scale(1.0);
        -moz-transform: scale(1.0);
        background-position: top center;
    }
}

Могу ли я установить скорость для разных браузеров?

Редактировать:

Как упоминалось вкомментарии я должен быть в состоянии использовать только 1 префикс поставщика?Мне нужна поддержка всех браузеров.Также упомянуто: animation-duration, кажется, не работает для меня.Я попробовал это с Firefox, установив длительность, но это никак не повлияло.Что я делаю не так?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...