HTML5 & CSS3 Help Site

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.

Back to Home Page

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 */