CSS Animation

Kleine Transition / Multiple Background – Demo

Warum auch immer JavaScript nutzen für bewegte Hintergründe? Man nehme: 2 Hintergrundbilder, eine Prise Transition und rühre die Background-position langsam unter. Selbst die aktuelle Firefox Beta (Nightly Build) versagt leider kläglich bei diesem Test, Multiple Backgrounds scheinen noch nicht gut implementiert zu sein. Chrome macht seine Sache dafür um so besser.

Bon Appetit! (Chrome only)


			body{
				font-family:Georgia,"Times New Roman",serif;					
				background: url(colored_bg_sec.png)  top 0 repeat,
						     url(colored_bg.jpg) top 0 repeat;
										
				-moz-transition: all 15s ease-in-out;
				-webkit-transition: all 15s ease-in-out;
			}

			body:hover{
				background: url(colored_bg_sec.png) top -500px repeat,
							url(colored_bg.jpg) top 500px repeat;
			}