How It Actually Works
Most articles about this Easter egg describe the mechanism as “some CSS3 magic” and move on. Here’s the actual animation, sourced from the developers who reverse-engineered it the day it launched.
The Animation, As Documented on Launch Day
When the Easter egg shipped on November 3, 2011, several developers immediately inspected the page and posted what they found in the same-day discussion thread on Hacker News. Multiple independent commenters converged on the same answer: Hacker News, Nov 2011 · source
body {
-webkit-animation-name: roll;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
-moz-animation-name: roll;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: 1;
}
@-webkit-keyframes roll {
100% { -webkit-transform: rotate(360deg); }
}A few things worth noting about this, all confirmed in that same discussion:
- It was inserted as an inline
<style>block, generated dynamically only for that specific query — not shipped as part of every Google Search page load. - It used vendor-prefixed properties (
-webkit-,-moz-) because in 2011, CSS3 animations were brand new and unevenly supported — which is also why it didn’t work in Internet Explorer 9 or Opera at launch, but did work in Chrome, Firefox 7+, and Safari. - The rotation runs on the whole page’s
bodyelement, which is why every part of the results page rotates together as one rigid unit rather than as separate pieces.
GPU, Not CPU
The property doing the work here, transform: rotate(), is one of a small set of CSS properties that browsers can hand off almost entirely to the GPU instead of the CPU. That’s the same reason this kind of rotation stays smooth on an older laptop, a five-year-old phone, or a Chromebook in a school computer lab: the browser isn’t recalculating page layout 60 times a second, it’s just asking the GPU to rotate an already-rendered image of the page.
That’s also why bandwidth cost is close to zero. The CSS for one rotation is a few hundred bytes of text, sent only when someone actually searches the trigger phrase — not baked into every page Google serves.
Make Any Page Do a Barrel Roll
This is a deliberately simplified, modern version of the same idea — no vendor prefixes needed in current browsers. Drop this into any page:
<style>
@keyframes barrel-roll {
to { transform: rotate(360deg); }
}
.roll-once {
animation: barrel-roll 0.9s ease-in-out 1;
}
</style>
<script>
document.body.classList.add('roll-once');
</script>Swap document.body for any specific element if you only want part of the page to spin. One courtesy worth building in that Google’s original didn’t have to worry about: check window.matchMedia('(prefers-reduced-motion: reduce)') before running the animation, and skip it for users who’ve asked their OS to reduce motion — which is exactly what the tool on our homepage does.