Create Spinning Rays with CSS3: Revisited

Last December I wrote a blog post titled Create Spinning Rays with CSS3 Animations & JavaScript where I explained how easy it was to create a spinning rays animation with a bit of CSS and JavaScript. The post became quite popular so I thought I'd take some time to look at it and improve it. It occurred to me that one solution I didn't present was a much lighter solution; a solution that required only CSS!

The HTML Structure

The structure will stay the same from the last post:

<div id="raysDemoHolder">
	<a href="/" id="raysLogo">David Walsh Blog</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:

/* boooo opera */
-o-transition: rotate(3600deg); /* works */

Just that bit drives the transformation continuously. As for Internet Explorer, I tried using -ms-transform / -ms-translation to support IE9 but couldn't get it to work.

The JavaScript

Like HBO's website said about Oz: "gone but never forgotten." One problem with the CSS-only version is that changing the animation-duration property upon hover (speeding it up when the user's mouse enters the rays) restarts the animation and thus makes it look awkward, but that's just one of the current limitations of CSS animations.

It's always good to revisit your code to ensure it's optimal. While this CSS-only version doesn't animate gracefully in Internet Explorer, the other browsers animate quite well. If you must support IE, adding a conditional comment with a JavaScript version would be best practice. Happy spinning!