使用 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>
最佳答案
考虑对 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>关于Safari 12 中对象位置的 CSS 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53841342/