Spritely in PURE CSS3 using CSS3 animations & CSS3 transitions - CSS3

This website demonstrates animation effects in CSS3 (for WebKit browsers only) and is not associated with Spritely.net. Images are copyright Spritely.net, used with their permission for educational purposes only. (Ajaxian's article about Spritely)
Explanation on Slideshare Approfondissement CSS3 (French)

↓ Move your mouse over the block below. ↓

Spritely

No Flash? No Problem!

	@-webkit-keyframes animClouds{
	        0%    {background-position: 0px 102px; }
	        100%  {background-position: -1068px 102px; }
	}
	
	@-webkit-keyframes animHill2{
	        from    {background-position: 0px 258px; }
	        to  {background-position: -1110px 258px; }
	}
	
	@-webkit-keyframes animHill1{
	        0%    {background-position: 0px 104px; }
	        100%  {background-position: -2220px 104px; }
	}
	
	#clouds {
		-webkit-animation-name: animClouds; 
		-webkit-animation-duration: 70s; 
		-webkit-animation-timing-function: linear;
		-webkit-animation-iteration-count: infinite;
	}
	
	#hill2{
		-webkit-animation: animHill2 25s linear 0s infinite;
	}
	
	#hill1 {
		-webkit-animation: animHill1 25s linear 0s infinite;
	}

More information from my blog on spritely in pure css3 using css3 animations, transitions, transform (webkit only).

CSS3