如何让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;
    }
}

- Parker Thomas

Answer 1

background-position必须是原始尺寸的乘积。 例如，如果您的图像大小为100x100，则background-position可以是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;
  }
}

- Adrian Bobrowski

---

这个很好用。如果你真的寻找过渡，你可以稍微看到一点，但这不足以成为问题。谢谢！ - Parker Thomas

你可以添加animation-timing-function: ease-in-out;来设置动画缓慢进行，这应该会有所帮助。 - Marco