Image Only

Please download regular image here

Image Gif

Gif images loads for about 6 - 7 seconds then stops, If it isn't loading,
please hold the "Shift" Key and refresh the window and you will see it appear again.

Please download gif here

(Advanced) Hover over with Mouse

HTML5 Code

			
			<div id="animation">
				<img id="bike" src="images/logo.jpg">
				<img id="frame" src="images/frame.png">
				<div class="wheels">
				    <img id="wheel1" src="images/wheel.png">
					<img id="wheel2" src="images/wheel2.png">	
				</div>
				
			</div>
				
				
			


CSS3 Animation Code

				div#animation 
					{
					margin:0;
					position:absolute;
					left:0;
					}


				div#animation img#bike,  
				div#animation img#frame,  
				div#animation img#wheel2,  
				div#animation img#wheel1 {position: relative;} 
				
				div#animation img#bike {z-index: 1;}
				div#animation img#frame   {bottom: 50px;  right: 453px; z-index:100; }
				div#animation img#wheel2  {z-index: 50;}
				div#animation img#wheel1  {z-index: 50;}
				
				div#animation div.wheels 
				{
					position: relative;
				    bottom: 281px;
				    right: 225px;
				    width: 1000px;
				}
				
				
				div#animation img#wheel1,
				div#animation img#wheel2 {position:relative;}
				
				div#animation img#wheel2 {left:61px;}
				
				div#animation img#wheel1,
				div#animation img#wheel2
				{
				
				    -webkit-transition-property: -webkit-transform;
				    -webkit-transition-duration: 1s;
				    -moz-transition-property: -moz-transform;
				    -moz-transition-duration: 1s;
				    transition-property: transform;
				    transition-duration: 1s;
				}
				
				div#animation:hover img#wheel1,
				div#animation:hover img#wheel2
				{
				    -webkit-animation-name: rotate; 
				    -webkit-animation-duration: 3s; 
				    -webkit-animation-iteration-count: infinite;
				    -webkit-animation-timing-function: linear;
				    -moz-animation-name: rotate; 
				    -moz-animation-duration: 3s; 
				    -moz-animation-iteration-count: infinite;
				    -moz-animation-timing-function: linear;
				    animation-name: rotate; 
				    animation-duration: 3s; 
				    animation-iteration-count: infinite;
				 
				    animation-timing-function: linear;
				}
				@-webkit-keyframes rotate {
				    from {-webkit-transform: rotate(0deg);}
				    to {-webkit-transform: rotate(360deg);}
				}
				
				@-moz-keyframes rotate {
				    from {-moz-transform: rotate(0deg);}
				    to {-moz-transform: rotate(360deg);}
				}
				
				@keyframes rotate {
				    from {transform: rotate(0deg);}
				    to {transform: rotate(360deg);}
				}