我有一个看起来像雪的 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;
}
}
最佳答案
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;
}
}
关于jquery - 重新启动时,如何使此 CSS 关键帧动画流畅?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41316640/