Hacker News Reader

Comment by gerrit | Hacker News Reader

Nice, but I wonder how much money Google are losing delivering the animation code for this easteregg with every results page, on the off-chance that someone types this query. I couldn’t find any sign of dynamic code loading in a cursory glance in the web inspector. Google Search’s source code is otherwise ruthlessly optimised for bandwidth savings.

View on HN

It's a CSS transition in an inline <style> block. I imagine it's inserted dynamically with the results.

   body {
     ...
     -webkit-animation-name: roll;
     -webkit-animation-duration: 4s;
     -webkit-animation-iteration-count: 1;
   }

Not to worry - this code is only included for this query. I can guarantee you this easter egg wouldn't have shipped if it had required supporting code to be present on every query, for the reasons you mentioned.

It's done with CSS:

body { -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; }

I didn't know this existed -- CSS3? No javascript at work here? I didn't look at the web resources myself but I'm curious

Whatever money they're losing on this, they're probably regaining in terms of PR (which is much needed after their bad-karma with users lately with reader/gmail), and hence long term revenue.

It's a CSS3 transform. Code to the client is no more than a few bytes.

Reply on news.ycombinator.com