在支持对象匹配和对象位置的浏览器中显示图像是有效的，但在Safari 12中，为对象位置属性设置动画以创建移动效果似乎没有任何作用(与使用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>
考虑设置transform属性的动画。它将更具性能和跨浏览器。
运行以下代码段：
.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>