Create Spinning Rays with CSS3: Revisited

By  on  
CSS Spinning Rays

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 */
@keyframes spin {
	from { transform: rotate(0deg); }
	to { 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; 
	
	/* microsoft ie */
	animation-name: spin; 
	animation-duration: 40000ms; /* 40 seconds */
	animation-iteration-count: infinite; 
	animation-timing-function: linear;
}

#rays:hover {
	/* 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!

Recent Features

  • By
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

  • By
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

Incredible Demos

  • By
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

Discussion

  1. I love this! It’s annoying that it still doesn’t work for me in IE. Any thoughts on when IE will get with the program?

    • Supposedly IE10 will allow this to work, though my IE10 preview doesn’t play the animation. My original version will work just fine in IE9 though! :)

  2. Cool stuff, I actually made a similar post a while back. I went a bit nuts with mine and used no images.

  3. Correction -ms-transform does work on IE9, but with limited support. However rotation should work perfectly.

    Thanks for the tutorial, nice to read something that includes CSS3 animation properties.

  4. Nice one… :) Hope the -ms-transform link on Twitter has helped..
    Greetz Thomas

  5. “They’re created using only CSS!”
    But you are actually using an image.
    You could have used multiple divs (one per ray), and made the rays with a gradient.

  6. I just used / shamelessly copied this for the logo on every page of my site, it’s pretty cool, I like! Cheers David

  7. Nice experiment!

  8. hi, just wanted to say, I really enjoy your blog and your fantastic demos, they are just great and much better than most of the stuff about css. greetings
    wayback-archive for my former site, sorry, the new one is on its way.

  9. Thanks for the demo. It’s amazing how a simple script can turn into a great animation.

  10. lareb

    Send me zip folder of it if its possible for you.

  11. Cornerpocket

    David. This is pretty bad ass. Nicely done.

  12. Kat

    I’m new to web page design and I’m trying to create a weight scale that has a dial that spins from ‘zero’ to ‘200’ and then back to ‘zero’.

    On top of all of it, I want to have a small contact form. When the user hovers over the submit button on the form, I want the read-out on the scale to rotate forward and return to the starting position when the user moves the cursor away.

    With just css, I can make the read-out spin just like I want it to, but when I try to put the scale image over it, the read-out won’t spin.

    This tutorial has been the closest I’ve been able to get to making it all function like I want, but I don’t know how to make it trigger on hover or make it rotate forward and then back to start.

    I would really appreciate some help?

    Thanks,
    Kat

    • Tom

      Hi Kat, I’m not sure when you posted this but you’re going to need Javascript to trigger the animation event on hover of the submit button. What you’re trying to achieve is not possible with just CSS.

  13. Sammy Jaryal

    Great work , but useless until IE 8,9 support.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!