Safari 12 中对象位置的 CSS 动画答案

【问题标题】：CSS animation of object-position in Safari 12Safari 12 中对象位置的 CSS 动画
【发布时间】：2019-05-19 08:40:52
【问题描述】：

在支持它们的浏览器中显示带有 object-fit 和 object-position 的图像，但在 Safari 12 中，动画 object-position 属性以创建移动效果似乎没有任何作用（与使用 CSS 过渡相同） .

这是一个错误吗？还是我错过了什么？

我做了一个简单的盒子和图片来演示：https://codepen.io/Taruckus/pen/zyoGNX

  <html>
    <head>
    </head>
    <body>
      <div class="wrap"><img src="https://via.placeholder.com/500x2000" alt=""></div>
    </body>
  </html>


 <style>
        .wrap {
            width: 400px;
            height: 400px;
            position: relative;
        }
        .wrap img {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 50% 0%;
            animation: move 5s ease 1 normal forwards;
            animation-delay: 0.2s;
        }

        @keyframes move {
            0% {
                object-position: 50% 30%;
            }
            100% {
                object-position: 50% 60%;
            }
        }
 </style>

【问题讨论】：

标签： css safari css-animations

【解决方案1】：

考虑为transform 属性设置动画。它会更高效且跨浏览器。

运行下面的sn-p：

.wrap {
  width: 400px;
  height: 400px;
  overflow: hidden;
}

.wrap img {
  width: 100%;
  transform: translateY(-20%);
  animation: move 5s forwards .2s;
}

@keyframes move {
  100% {
    transform: translateY(-45%);
  }
}

<div class="wrap">
  <img src="https://via.placeholder.com/500x2000" alt="">
</div>

【讨论】：

谢谢，但我需要图像来维持其容器内的“覆盖”行为。现在，作为一种解决方法，我将图像与 background-image 一起显示并为 background-position 属性设置动画。