Create Spinning, Fading Icons with CSS3 and MooTools

By  on  

A goal of my latest blog redesign was to practice what I preached a bit more;  add a bit more subtle flair.  One of the ways I accomplished that was by using CSS3 animations to change the display of my profile icons (RSS, GitHub, etc.)  I didn't want to abandon CSS animations completely though;  I added a bit of MooTools to randomize the icon's initial display position and rotation.  Let me show you how to use CSS3 and MooTools to create dymanic, rotating elements.


We'll use the standard, accessible, SEO-friendly HTML for link creation:

<div id="followIcons">
	<a href="" rel="nofollow" id="iconRSS">RSS Feed</a>
	<a href="" rel="nofollow" id="iconTwitter">@davidwalshblog Twitter</a>
	<a href="" rel="nofollow" id="iconGitHub">@davidwalshblog Twitter</a>
	<a href="" rel="nofollow" id="iconDelicious">dwizzlestar</a>
	<a href="" rel="nofollow" id="iconFacebook">David Walsh Facebook</a>
	<a href="" rel="nofollow" id="iconLinkedIn">David Walsh LinkedIn</a>
	<a href="skype:davidwalsh83?chat" id="iconSkype">David Walsh Skype</a>
	<a href="mailto:[email protected]" id="iconMail">David Walsh Email</a>
	<a href="" rel="nofollow" id="iconForge">David Walsh MooTools Forge</a>

CSS will make these links pretty.


The first part of the process is using standard CSS to move the text off screen and instead use the icons as background images for the link:

#followIcons a	{ 
	background-position:0 0; 

Once we've done that time-tested practice, it's time to put a few initial CSS3 settings into place.  As you probably know, at this point all CSS transform properties are browser-specific, so our CSS will get a bit lengthy:

#followIcons a	{ 
	transition-duration: 0.8s;
	transition-property: transform;

The transition duration will be 0.8 seconds and transition property will be a basic transform.  You can change the transform duration to any duration you'd like.  Too fast or too slow will ruin the effect (that's what she said).

The MooTools JavaScript

The first part is randomly positioning each node/icon within the container.  It's important to know the container's width and height, then subtract the icon width and height from that to know the true area you can fit the icon into.  Nothing would be more lame than a piece of the icon hidden. The next step of the process is adding mouseenter and mouseleave events to make the images rotate and fade in during each respective event.

// "Globals" - Will make things compress mo-betta
var $random = function(x) { return Math.random() * x; };
var availableWidth = 200, availableHeight = 40;

// Find the appropriate prefix icon
var cssPrefix = false;
switch( {
	case "safari":
		cssPrefix = "webkit";
	case "chrome":
		cssPrefix = "webkit";
	case "firefox":
		cssPrefix = "moz";
	case "opera":
		cssPrefix = "o";
	case "ie":
		cssPrefix = "ms";

// The Icons
var icons = $$("#followIcons a");
// Apply opacity
var zIndex = 1000;

// Randomize each link
icons.each(function(element,index) {
	// Generate the random rotation amount
	var startDeg = $random(360);
	// Place the image at the default rotation and opacity
	var resetPlace = function() {
		element.fade(0.6).setStyle("-" + cssPrefix + "-transform","rotate(" + startDeg + "deg)");
	// Randomly position the element
	element.set("style","top:" + $random(availableHeight) + "px; left:" + $random(availableWidth) + "px; z-index:" + zIndex);
	// Rotate the image initially
	// Add events
		mouseenter: function() {
			element.fade(1).setStyle("z-index",++zIndex).setStyle("-" + cssPrefix + "-transform","rotate(0deg)");
		mouseleave: resetPlace

When the mouseenter event occurs, the rotation is animated to 0, no rotation.  When the mouse leaves the element, the element animates to its initial random rotation.  You'll also note that I've used opacity to add to the subtle effect.

And there you have it:  spinning, fading, animated elements.  What's the alternative?  Static, boring, traditional icons.   What do you think?  Too much?  Too little?  Share your ideas!

Track.js Error Reporting

Upcoming Events

Recent Features

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

  • Create a Dynamic Table of Contents Using MooTools 1.2

    You've probably noticed that I shy away from writing really long articles. Here are a few reasons why: Most site visitors are coming from Google and just want a straight to the point, bail-me-out ASAP answer to a question. I've noticed that I have a hard time...

  • CSS content and attr

    CSS is becoming more and more powerful but in the sense that it allows us to do the little things easily.  There have been larger features added like transitions, animations, and transforms, but one feature that goes under the radar is generated content.  You saw a...


  1. Arian

    Why not test really for the prefix:

    besides prefix for ie is ms. Also to be future proof you should have something that will work when no prefix is needed anymore.

    You can use Number.random(0, 360) too btw, instead of your own random function.

    But it’s a nice effect for sure :)

  2. A quick update has been made for the purposes of Chrome.

  3. Matthew F

    Cute but it seems like it detracts from readability/usability…

  4. tampe125

    but sometimes icons overlap, is there a way to prevent that?

  5. Thank you so much for the codes! I’m in the process of installing them in my website as well.

    I don’t know if this is redundant, especially for you as a moo tools developer, but I would add in the instructions to add the

    … just for newcomers or peeps who stumble upon :)

  6. oopps the codes were snipped up… i meant to add in src=” for javascript as well :)

  7. siddhesh

    is there anyway that the icons dont overlap please tell me how can that happen??

  8. Marcel Hadorn

    Very Nice, but this doesn’t work in IE9, although IE supports -ms-transform, and for example did make use of this with jQuery. Wasn’t yet able to find the issue, if you do, please let us know.

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