このCSSキーフレームアニメーションを再起動すると滑らかにする方法を教えてください。

Question

私は雪のように見えるCSSキーフレームアニメーションを持っています。それは20秒間続くように設定され、無限にループします。問題は、設定された時間が経過してアニメーションが終了して再起動すると、ジャーキー/ clunky再起動のようなものです。

アニメーションがループしているときにスムーズにして再起動しているように見えないようにする方法はありますか？

body { 
    height: 100%; 
    /*background-color: #333;*/ 
    background-color: #6b92b9; 
    background-image: url('http://i.imgur.com/BiSmXaq.png'), url('http://i.imgur.com/XHuy0NJ.png'), url('http://i.imgur.com/okpRxJU.png'); 
    -webkit-animation: snow 20s linear infinite; 
    -moz-animation: snow 20s linear infinite; 
    -ms-animation: snow 20s linear infinite; 
    animation: snow 20s linear infinite; 
} 

@-webkit-keyframes snow { 
    0% { 
     background-position: 0px 0px, 0px 0px, 0px 0px 
    } 
    50% { 
     background-color: #b4cfe0 
    } 
    100% { 
     background-position: 500px 1000px, 400px 400px, 300px 300px; 
     background-color: #6b92b9; 
    } 
} 

@-moz-keyframes snow { 
    0% { 
     background-position: 0px 0px, 0px 0px, 0px 0px 
    } 
    50% { 
     background-color: #b4cfe0 
    } 
    100% { 
     background-position: 500px 1000px, 400px 400px, 300px 300px; 
     background-color: #6b92b9; 
    } 
} 

@-ms-keyframes snow { 
    0% { 
     background-position: 0px 0px, 0px 0px, 0px 0px 
    } 
    50% { 
     background-color: #b4cfe0 
    } 
    100% { 
     background-position: 500px 1000px, 400px 400px, 300px 300px; 
     background-color: #6b92b9; 
    } 
} 

@keyframes snow { 
    0% { 
     background-position: 0px 0px, 0px 0px, 0px 0px 
    } 
    50% { 
     background-color: #b4cfe0 
    } 
    100% { 
     background-position: 500px 1000px, 400px 400px, 300px 300px; 
     background-color: #6b92b9; 
    } 
} 

Answer 1

背景位置に元のサイズを掛けなければなりません。あなたの画像サイズが100×100である場合 たとえば、バックグラウンドポジションは100×100、100x200、200x100、200x200の、そしてそう

body { 
 
    height: 100%; 
 
    /*background-color: #333;*/ 
 
    background-color: #6b92b9; 
 
    background-image: url('http://i.imgur.com/BiSmXaq.png'), url('http://i.imgur.com/XHuy0NJ.png'), url('http://i.imgur.com/okpRxJU.png'); 
 
    animation: snow 5s linear infinite both; 
 
} 
 
@keyframes snow { 
 
    0% { 
 
    background-position: 0px 0px, 0px 0px, 0px 0px; 
 
    } 
 
    50% { 
 
    background-color: #b4cfe0; 
 
    } 
 
    100% { 
 
    background-position: 300px 300px, 400px 400px, 500px 500px; 
 
    background-color: #6b92b9; 
 
    } 
 
}