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