Question

我试图让云以较慢的速度移动，将其显示为图像的背景。当我放慢它们的速度时，云会以锯齿状移动。有没有办法让云以缓慢的速度平稳移动？

这是我的CSS：

.cloud_one {
    background: url(http://dev.websitesdepot.com/babymoon2/wp-content/uploads/2016/10/cloud.png);
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 300%;
    -webkit-animation: cloud_one 450s linear infinite;
    -moz-animation: cloud_one 450s linear infinite;
    -o-animation: cloud_one 450s linear infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    background-repeat: repeat-x;
}

@-webkit-keyframes cloud_one {
    0% {
    left: 0
}
100% {
    left: -200%
}
}

这是一个小提琴：

https://jsfiddle.net/jj6oc0tg/

Answer 1

将*Seriavant> testSerialize (Token "1234" :>> Lit :>> Skip :>> Token "Bar") "1234PERSON Bar "动画为transform:translate3d(0,0,0)的效果会优于transform:translate3d(-200%,0,0)到left:0

left:-200%

Answer 2

background-position:center;

试试这个。如果它不起作用，请尝试尝试放置代码的位置

如何以低速平滑地动画CSS3？

2 个答案: