Pure CSS3 animated clouds background

SomeGuy

Totally sexy, but unfortunatly dosnt animate in Internet explorer….><

Thanks though. Totally cool.

Pixelicious

Love it! It’s just a final tweak but
- it’s also a good idea to play with the opacity so that the loop is smoother (you loose that relative difference in opacity between the clouds though)
- add a little bit of vertical movement if you want some cartoonish effect.
- Add some gradient to the bottom rectangle (just like it your other tutorial
I played with your code for a minute or 2 and came up with this:
@-webkit-keyframes moveclouds {
0% {margin-left: 1000px; opacity:0;}
25% {margin-top: -20px;}
50% {opacity:1; margin-top: 0px}
75% {margin-top: 20px}
100% {margin-left: -1000px; opacity: 0}
}

George

This will be a great kind of thing to use in a HTML5 game, love the idea!

samvedna

Awesome example !!!
I want to write some code in center of each cloud…How it’s possible ?

Some Guy

Using png-24 would be much more practical.

Renoir Boulanger

Totally cool.

Regarding IE. Of course it wont’ work. It use keyframe animation that is /only/ supported by WebKit.

deafwing

that’s impressive ..s hit … great tutorial and it has opened up some ideas for me .. :D thanks much – you are star on the web for sharing your knowledge :D

ReggaeTubeWatcher

Hello! Just a big thanks for sharing the knowledge !
I like your tutorials soooo much!

Katie

Thank you so much. I really enjoyed this tutorial!

Ram

good creativity i like it

Abdullah

How do you add content on top of the clouds?

Alex Kim

It doesn’t work with IE

maxw3st

This is excellent. I’ve modified your CSS a bit to make it 3D. It looks basically the same, but is now hardware accelerated. Also, using prefixfree.min.js works to eliminate the need for prefixes.

The exception to that is your background gradient in Webkit. Prefixfree doesn’t seem to be handling that (using Chrome Dev. model) so I put in a copy with the old syntax and a webkit prefix.

Marlene Brazier

Great stuff, but one question please.
How do iadd a fix transparent image on the top ofthe clouds?
thanks

Justin John Mathews

Thank you for wonderful moving cloud animation.

I would like to know, how we can make this moving clouds as background of our page. As of now, If I write clouding div inside my div container. How to make clouds as background of my div container?

In CSS, “.cloud:before, .cloud:after” have “postion:absolute” twice as css property. I think, one of them should be removed…

Cheadarih PEN

I am very interesting on your code is so good!!!!!

Jay

Awesome code Ruby, How would i go by adding a timer or something on this then when its night in real life the background turns dark in the code that would be the ultimate.

Surfer_G

Absolutely love this effect. Is so beautiful in action.

The only problem i’m having is that it doesn’t seem to work in Safari. I’m still using the base code from the example with a few extra html 5 elements thrown in to flesh out the full set of animation combos (e.g. -o-, -moz- etc.) but for some reason in Safari there is no sign of the clouds.

A little sad but it works in all the rest (except possibly IE – i haven’t even bothered to check as its such a slim possibility).

Any ideas?

Wes

hi. great code. thank you. i am having one problem. i cannot get my html code to sit on top of it. all my html is pushed to the bottom of the page. i’ve tried to place it inside every possible position without luck.