Question

我有一种情况需要通过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。

谢谢，麦克

动画背景位置：Safari无法实现底部

0 个答案: