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
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

Incredible Demos

  • By
    MooTools Zebra Table Plugin

    I released my first MooTools class over a year ago. It was a really minimalistic approach to zebra tables and a great first class to write. I took some time to update and improve the class. The XHTML You may have as many tables as...

  • By
    Create a Spinning, Zooming Effect with CSS3

    In case you weren't aware, CSS animations are awesome.  They're smooth, less taxing than JavaScript, and are the future of node animation within browsers.  Dojo's mobile solution, dojox.mobile, uses CSS animations instead of JavaScript to lighten the application's JavaScript footprint.  One of my favorite effects...

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!