css - 背景画像アニメーション

Question

特大の背景画像をそのような方法でアニメーション化する方法に関するアドバイスはありますか?左から右、上から下、右から左、そして再び上にスムーズに移動する必要があります。以下のスケッチで理解できると思います。

Answer 1

アニメーションを使用します。

jsfiddle: http://jsfiddle.net/XXUyj/4/

HTML:

<div id="bg"></div>

CSS:

#bg {
    left: 0;
    position: absolute;
    top: 0;
    width:100%;
    height: 100%;
    z-index: 60;
    background-image: url('http://superhaufen.de/earth.jpg');
    animation-duration: 10s;
    animation-name: slide;
    animation-iteration-count: infinite;
    background-size: 200% auto;
}
@keyframes slide {
    0% {background-position: 0 0;}
    25% {background-position: 100% 0;}
    50% {background-position: 100% 100%;}
    75% {background-position: 0 100%;}
    100% {background-position: 0 0;}
}

使い終わったら、必ずすべてのベンダー プレフィックスを追加してください (@-moz-keyframes、@-ms-keyframes、@-webkit-keyframes など)。

これは、ベンダー プレフィックス ( http://jsfiddle.net/XXUyj/5/ )を使用した更新 jsfiddleです。アニメーションをサポートするすべてのバージョンの IE がベンダー プレフィックスなしでアニメーションをサポートしているため、microsoft は含めませんでした。また、opera も含めませんでした。追加の CSS サイズを保証するのに十分な市場シェアがなく、いずれにせよ次のバージョンの webkit に移行します。