css animations – How to move my clouds in different directions in CSS?

Hey Logo, I’m trying to move my two clouds from screen to screen again and again in different directions at different speeds. I have an animation running with one cloud but for some reason it will not work with another cloud or I should say how I do not want it to work. Is there anyone who can help me?

Here is my CSS

/*My clouds positions*/
 img.cloud1 {
 float:  right;
 animation: pulse 3s ease infinite alternate, 
 nudge 10s linear infinite alternate;


 @keyframes nudge {
 0%, 100% {
 transform: translate(0, 0);

 50% {
 transform: translate(1100px, 0);

 80% {
 transform: translate(-150px, 0);

 img.cloud2 {
 float:  left;


Write a Comment