Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Is it possible to use CSS3 animations to move an image up and down while infinitely scrolling side to side?

Is it possible to use CSS3 animations to move an image up and down while infinitely scrolling side to side?

Problem

I have a question that I am hoping I can achieve with just CSS3 animations but if the use of jQuery animate is necessary then thats alright as well. :]

I have an image of clouds sliding from right to left with an infinite loop on them. This works great and I am loving the CSS3 animates but I can't find any info on adding a vertical animation to them.

If this is possible to achieve my cloud images to move up and down just slightly, randomly is possible, so they aren't just sliding straight across then that would be epic. I am new to CSS3 animations so I have read a little on keyframes but, the few times I have tried with % based keyframes, I have not been to successful in getting them to work.

Would this be what I need to do or would it be best to just use jQuery for my desired effect.

CSS

.clouds {
    width: 20em;
    position: absolute;
    top: 1em;
    -webkit-animation-name: Clouds;
    -webkit-animation-duration: 50s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: Clouds;
    -moz-animation-duration: 50s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -ms-animation-name: Clouds;
    -ms-animation-duration: 50s;
    -ms-animation-timing-function: linear;
    -ms-animation-iteration-count: infinite;
}

@media only screen and (max-width: 680px) {
  .clouds {
    width: 25%;
    top: 3em;
  }
}

/* Clouds CSS3 animations */

@-webkit-keyframes Clouds {
    from {
        right: -15%;
    }
    to { 
        right: 100%;
        top: 1em;
    }
}
@-moz-keyframes Clouds {
    from {
        right: -15%;
    }
    to { 
        right: 100%;
        top: 1em;
    }
}
@-ms-keyframes Clouds {
    from {
        right: -15%;
    }
    to { 
        right: 100%;
        top: 1em;
    }
}

/* End Clouds CSS3 Animation */

JSFIDDLE

Any input on this would be greatly appreciated and if you need anything else let me know!

My Portfolio Link

Problem courtesy of: Josh Powell

Solution

% based keyframes should just work: JSFIDDLE

I split the animation into 2 parts to make it easier to understand.

@-webkit-keyframes Clouds-h {
    from {
        right: -15%;
    }
    to { 
        right: 100%;
    }
}

@-webkit-keyframes Clouds-v {
    from {
        top: 3em;
    }
    50% {
        top: 2em;
    }
    to {
        top: 3em;
    }
}

And put them in one line:

-webkit-animation: Clouds-h 50s linear infinite, Clouds-v 10s ease-in-out infinite;

This way you can easily marge animations to make a complex one. Like adding a third animation for cloud size.

Solution courtesy of: Kabie

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Is it possible to use CSS3 animations to move an image up and down while infinitely scrolling side to side?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×