We knew unicorns could bounce, but now they spin?!
2 September, 2014 § 7 Comments
One of the hidden features of Firefox 29 was a unicorn that bounced around the Firefox menu when it was emptied. The LA Times covered it in their list of five great features of Firefox 29.
Building on the fun, Firefox 32 (released today) will now spin the unicorn when you press the mouse down in the area that unicorn is bouncing.
The really cool thing about the unicorns movement, both bouncing and spinning, and coloring is that this is all completed using pure CSS. There is no Javascript triggering the animation, direction, or events.
The unicorn is shown when the menu’s :empty pseudo-class is true. The direction and speed of the movement is controlled via a CSS animation that moves the unicorn in the X- and Y-direction, with both moving at different speeds. On :hover, the image of the unicorn gets swapped from grayscale to colorful. Finally, :active triggers the spinning.
JAWS 
How did you made the monkey work for this video?
I hired 10,000 monkeys to randomly play with the computer. Eventually, one of the monkeys exhibited the behavior necessary to unlock the Easter Egg.
I can’t see a unicorn in the first gif.
The first gif is just me showing that the menu must be empty before the unicorn will appear.
Do the unicorn is made using pure CSS also, or it’s made with another technnology(a simple image file, Canvas, SVG or maybe webgl)?
The unicorn is a PNG, so I guess it’s not *all* made with CSS 🙂
The unicorn is not spinning anymore in the most recent version of Firefox (currently 38.0)
😦 I miss it