1

我有一种情况，我需要通过 CSS 动画将背景图像的 y 属性从像素尺寸设置为“底部”。虽然这在 Chrome 和 FF 中运行良好，但在 Safari 中似乎不起作用。我也尝试过“100%”，它再次适用于 Chrome 和 FF，但不适用于 Safari。

我在网上搜索了很多，但找不到任何明确的文档说明 Safari 不支持将此属性设置为底部动画，但这似乎是它的行为。

任何人都可以对此有所了解 - 和/或确认这真的不可能吗？

这是一个自己测试的小提琴：http: //jsfiddle.net/coalescent/GRgAV/1/

@-webkit-keyframes mastheadBG {
    0% { background-position-y: 300px; }
    100% { background-position-y: bottom; }
}

.parent {
    width: 100%;
    height:30%;
    background-color: #aaa;
    background-image: url(http://coalescentdesign.com/_img/circle.png);
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-animation: mastheadBG 3.0s ease;
}

不幸的是，我需要实现这样的动画，因为包含元素的高度是可变的——我宁愿不使用任何 js。

谢谢，迈克

4

0 回答 0