Pure CSS3 animated clouds background

El Desperado

Love it!

Richard

so coool!, great job

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.

Eduardo

This is very good. Informative and simple; thanks for posting.

Eduardo

By the way, @Surfer_G, it works fine in Safari 6.0 for me.

Daniela

It’s perfect!, Very good job!. Thanks!!

BlackRiver

This is some really great stuff. But I would like to know is there a way to somehow add some text to DIV’s, so it is displayed inside the cloud?

Mugo

That is an awesome effect. Lots of Creativity

Arundhati

this is great but it is not working in Internet Explore

sidharth

how to change image for this aminations?

James

Works in IE, you just need to add “regular” @keyframes and animation/transform styles (IE 10 and 11)

Amanda Wilson

@amanda_w13

Jacob Lucado

How would I have this running underneath of my content like an actual background?

Tushar Sharma

Great tutorials thank you!
How to make it to move from both directions?

phincuddy

Doesn’t work for practical web design. You can’t add content ontop (defeats the purpose of it being a “background”). nice try, though.

Michael

Love this. Thanks very much for taking the time. I ‘reversed’ it and had an image in background of div, so the clouds flowed across the top…and this worked fab for me.

Govindaraj

Great tool inspiring…

jester

or, you could just:

If you want something less fancy (no different speeds) and less cpu usage.

Rainy

The result is exciting. Thx for sharing.

mallikasrivastava

hey m new in this field
pls anyone suggest me how to run
these codes
coz i copied it and paste it in notepad and save wid the extention of .css bt m unable to run after that i also use .html extention bt
it didnt run
how i run it
pls anyone suggest me

Ibrahim Vatih

Wuooohh. Coooollll!

Aise

This is great, but uses lots of CPU… any way to make it lighter? I heard about a translateZ tecnique, but don’t know where and how to apply it!

francois

Hey, thanks for this.

It works great, but I don’t know why, when I turn on iPad emulation on chrome, or browse via an iPad, the entire website is slowly zooming…
I know this is due to the animation because it stops when I comment out the @-keyframes part.

any idea on how to solve this ?

thanks