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

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

0 голосов
/ 19 февраля 2019

У меня есть коробка и изображение внутри коробки.Я использую CSS3 object-fit свойство для заполнения поля с изображением.И мне нужна движущаяся анимация тоже.Я использую ключевую анимацию для перемещения изображения.

Это мой 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); })

Он отлично работает в Chrome, Mozilla и края.Но не работает в сафари.

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

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

1 Ответ

0 голосов
/ 19 февраля 2019

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>
...