<div class="demo"> <h2>CSS3 Animation</h2> <div class="dragongears"> <div class="gearbox"> <img class="big" src="http://dragongears.com/gear-large.png" /> <img class="small" src="http://dragongears.com/gear-small.png" /> </div> </div> <h2>Animated GIF</h2> <img src="http://dragongears.com/wp/wp-content/themes/dragongears/style/img/gears_anim_48_faster.gif" /> </div>
.demo { position: relative; display: inline-block; margin: 50px; padding: 20px; background-color: orange; } .dragongears { position: relative; background-image: url(http://dragongears.com/wp/wp-content/themes/dragongears/style/img/drag_ngears.png); width:520px; height:53px; } .dragongears .gearbox { position: absolute; left: 140px; top:12px; display:inline-block; width: 40px; height: 40px; } .dragongears .big { width: 100%; height: 100%; animation: rotatebig 18.2s infinite linear; } @keyframes rotatebig { 100% { transform: rotate(-360deg); } } .dragongears .small { position: absolute; left: 29px; top: -12px; width: 23px; height: 23px; animation: rotatesmall 8.4s infinite linear; } @keyframes rotatesmall { 100% { transform: rotate(360deg); } } h2 { font-family: sans-serif; }