Home / Accueil » Lab's » Spritely in PURE CSS3 using CSS3 animations, transitions, transform (webkit only)

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. ↓

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;
	}

GeekFG's web services & applications

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

Lab's

Trier des couleurs en javascript

Recapitulatif conference decouverte HTML5/CSS3

Spritely in PURE CSS3 using CSS3 animations, transitions, transform (webkit only)

Spritely in PURE CSS3 using CSS3 animations, transforms (webkit only)