Michael Haren’s Wassupy Blog

How the Google Search “Do a barrel roll” Works

in easter eggs, in the news, random updates, nablopomo 2011, and technology

As a web guy I was intrigued by today’s Google easter egg. If you haven’t heard, go to Google and search for “Do a barrel roll”. If you’re using a decent browser, the entire page will do fun things.

How do they do it? I jumped into the source to see. It’s a simple CSS transition:

@-moz-keyframes roll    { 100% { -moz-transform: rotate(360deg); } } 
@-o-keyframes roll      { 100% { -o-transform: rotate(360deg); } } 
@-webkit-keyframes roll { 100% { -webkit-transform: rotate(360deg); } } 

body{ 
    border: 1px solid #000;

    -moz-animation-name: roll;
    -moz-animation-duration: 4s;
    -moz-animation-iteration-count: 1;
    
    -o-animation-name: roll;
    -o-animation-duration: 4s;
    -o-animation-iteration-count: 1;
    
    -webkit-animation-name: roll;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 1; 
}

Nice and easy, eh? Now go play with this fiddle.