Как сделать анимацию ключевого кадра CSS плавной после ее перезапуска?

Question

У меня есть анимация ключевых кадров CSS, которая должна выглядеть как снег. Он настроен на 20 секунд и бесконечный цикл, что и происходит. Проблема в том, что, когда анимация достигает конца после заданного времени и перезапускается, это своего рода резкий / неуклюжий перезапуск.

Есть ли способ сделать его более плавным, когда анимация зацикливается, чтобы она не выглядела как перезапуск, а просто как постоянный поток?

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

background-position должны умножаться на оригинальный размер. Например, если размер вашего изображения составляет 100x100, то положение фона может быть 100x100, 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;
  }
}