У меня есть коробка и изображение внутри коробки. Я использую свойство объектной подгонки CSS3 для заполнения поля изображением. И мне нужна движущаяся анимация тоже. Я использую анимацию по ключевым кадрам для перемещения изображения.
Это мой HTML
<div class = "item">
<img src = "https://placeimg.com/640/480/any">
</div>
<br>
<button>
animation
</button>
Мой CSS идет здесь,
.item {
width: 200px;
height: 200px;
border: 1px solid #000;
}
.item img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 0px 0;
}
.item.active img {
-webkit-animation: objectMove 2s;
animation: objectMove 2s;
/* object-position: 100px 0; */
}
@-webkit-keyframes objectMove {
from {
object-position: 0 0;
}
to {
object-position: 100px 0;
}
}
@keyframes objectMove {
from {
object-position: 0 0;
}
to {
object-position: 100px 0;
}
}
А вот мой javascript,
$('button').click(function(){ $('.item').addClass('active');
setTimeout(function(){ $('.item').removeClass('active'); }, 2000); })
It works fine in chrome, mozilla and edge. But not working in safari.
Может ли кто-нибудь помочь мне исправить это?






object-position с keyframes не полностью поддерживается браузером Safari, поэтому вместо object-position я использовал transform:translateX;
$('button').click(function() {
$('.item').addClass('active');
setTimeout(function() {
$('.item').removeClass('active');
}, 2000);
}).item {
width: 200px;
height: 200px;
border: 1px solid #000;
overflow: hidden;
}
.item img {
width: 100%;
height: 100%;
object-fit: cover;
transform:translateX(0);
}
.item.active img {
-webkit-animation: objectMove 2s;
animation: objectMove 2s;
}
@-webkit-keyframes objectMove {
from {
-webkit-transform:translateX(0);
}
to {
-webkit-transform:translateX(100px);
}
}
@keyframes objectMove {
from {
transform:translateX(0);
}
to {
transform:translateX(100px);
}
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "item">
<img src = "https://placeimg.com/640/480/any">
</div>
<br>
<button>
animation
</button>