CODEWITHSUNDEEP
css
grantwd
grantwd

Reputation: 13

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/

Upvotes: 1

Views: 754

Answers (2)

StackDoubleFlow
StackDoubleFlow

Reputation: 333

background-position:center;

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

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196187

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

Upvotes: 1

Related Questions