How to animate CSS3 smoothly at a slow speed?

Question

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/

Possible duplicate of [Is there a way I can force chrome to do subpixel rendering for a slow translation?](http://stackoverflow.com/questions/22097660/is-there-a-way-i-can-force-chrome-to-do-subpixel-rendering-for-a-slow-translatio) — Mooseman, Nov 18 '16 at 02:06

score 1 · Accepted Answer · answered Nov 18 '16 at 02:14

1

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); }
}

answered Nov 18 '16 at 02:14

Gabriele Petrioli

191,379
34
261
317

score 0 · Answer 2 · answered Nov 18 '16 at 02:15

0

background-position:center;

try this. if it doesn't work try experimenting with where you put the code

answered Nov 18 '16 at 02:15

StackDoubleFlow

323
4
12

How to animate CSS3 smoothly at a slow speed?

2 Answers2