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を使用しないことをお勧めします。
ありがとう、マイク