grantwd grantwd - 21 days ago 7
CSS Question

How to animate CSS3 smoothly at a slow speed?

I am trying to make the clouds move at a slower speed to display it as a background for an image. When I slow them down however the clouds will move jaggedly. Is there any way to make the clouds move smoothly at a slow speed?

Here is my 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%
}
}


Here is a fiddle:

https://jsfiddle.net/jj6oc0tg/

Answer

Animating the transform:translate3d(0,0,0) to transform:translate3d(-200%,0,0) will have better results than the left:0 to left:-200%

@-webkit-keyframes cloud_one {
    0% { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-200%,0,0); }
}