Анимация ключевого кадра для положения объекта не работает в сафари

У меня есть коробка и изображение внутри коробки. Я использую свойство объектной подгонки 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.

Вот jsfiddle того же самого.

Может ли кто-нибудь помочь мне исправить это?

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
0
410
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

https://www.sitepoint.com/using-css-object-fit-object-position-properties/#browser-support-and-polyfills

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>

Другие вопросы по теме