Pure CSS3 Animation!
That is right, you just read correctly... This is a PURE CSS3 spinning image. No Javascript what so ever is used. Want to make your own??? Read below... Note: This does NOT work in IE.
The first thing you need to do is replace the logo within #raysLogo to the logo you wish to use and you will also need to download the rays image which you can do here.
The HTML Structure
<div id="raysDemoHolder"> <a href="/" id="raysLogo">Insert Link Name here.</a> <div id="rays"></div> </div>
One parent element (with position:relative and fixed dimensions) with two child elements: the logo and the ray container.
The CSS
This CSS-only version uses CSS transforms like the previous boasted, but now we'll introduce @keyframes. The base goal we'll have for the keyframes is starting at rotate(0deg), animating to rotate(360deg):/* keyframes for animation; simple 0 to 360 */ @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-ms-keyframes spin { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } /* basic structure for the rays setup */ #raysDemoHolder { position: relative; width: 490px; height: 490px; margin: 100px 0 0 200px; } #raysLogo { width: 300px; height: 233px; text-indent: -3000px; background: url(logo.png) 0 0 no-repeat; display: block; position: absolute; top: 0; left: 0; z-index: 2; } #rays { /* with animation properties */ background: url(rays.png) 0 0 no-repeat; position: absolute; top: -100px; left: -100px; width: 490px; height: 490px; /* webkit chrome, safari, mobile */ -webkit-animation-name: spin; -webkit-animation-duration: 40000ms; /* 40 seconds */ -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; /* mozilla ff */ -moz-animation-name: spin; -moz-animation-duration: 40000ms; /* 40 seconds */ -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; /* microsoft ie */ -ms-animation-name: spin; -ms-animation-duration: 40000ms; /* 40 seconds */ -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; } #rays:hover { /* -webkit-animation-duration: 10000ms; 10 seconds - speed it up on hover! */ /* resets the position though! sucks */ }Using the animation-timing-function, animation-duration, and animation-iteration-count will allow us to make the animation linear (consistent), well-timed, and allow the animation to continue forever! You'll also notice that the animation is much smoother than the JavaScript-powered counterpart. Now we have a problem though: Opera does not yet support @keyframes. Luckily Opera's default functionality allow for us to create this never-ending animation:
-o-transition: rotate(3600deg); /* works */