对象位置的关键帧动画在 Safari 中不起作用答案

【问题标题】：Keyframe animation for object-position not working in safari对象位置的关键帧动画在 Safari 中不起作用
【发布时间】：2019-07-12 14:32:28
【问题描述】：

我有一个盒子，盒子里有一张图片。我正在使用 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 和 edge 中运行良好。但不能在 safari 中工作。

Here is the jsfiddle of the same.

谁能帮我解决一下？

【问题讨论】：

标签： css safari cross-browser css-animations keyframe

【解决方案1】：

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

object-position 和 keyframes 在 Safari 浏览器上不完全支持，所以我使用 transform:translateX; 而不是 object-position

$('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>

【讨论】：