Я создаю эффект с ключевыми кадрами, который увеличивает масштаб изображения, а также перемещает его (эффект Кена Бернса).
Все работает, пока я не использую другие браузеры.В 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, установив длительность, но это никак не повлияло.Что я делаю не так?