Google Doodle For Eadweard J. Muybridge's 182nd Birthday
UPDATE - Here is a Follow Up of the Item to make it more accurate.
Today (9th April), Google has a new Doodle for Eadweard J. Muybridge's 182nd Birthday done with Javascript. I just thought of trying to implement the same concept in Pure CSS (as much as possible) and see how far I could go. So i gave it a try and this is what I have come up with (see demo in the live preview box).
If you see the demo, it is not accurate. When the player is clicked the animation starts suddenly unlike the original version where it starts slowly, (followed by a subtle rewind) and then it continues to play normally. If any of you can achieve the exact effect then just make a testcase at the playground and link in the comments. I'll make appropriate changes and also add proper credits.
I am still improving the item as much as I can, so it will keep on receiving frequent updates for sometime.
How has it been done ?
Every box in which you see a horse riding is a <div> with the background of a sprite that has the images for all the positions of the horse. The background position of the image is then changed with CSS3 Animations to animate the horse. One thing to notice here is the use of steps(12, end) as the animation-timing-function that makes it possible for the background position to change on the spot instead of animating by sliding left. This is a very interesting feature of CSS3 that most people don't know about yet! Mozilla Developer Network has an excellent article that explains the various timing functions.
The borders (grids) that you see is basically CSS borders set on the ::after pseudo element of the small divs. The pseudo elements also have box-shadow for the top and left shadows.
The player button is a <label> (with an image background) and <input type="radio">. When the player is clicked (you basically click the label element), that checks the radio button. In the checked state, we use :checked pseudo class on the radio button with the general sibling selector - ~ to initiate the animation on the divs. The label element also has borders like the divs on it's ::after pseudo element.
The demo is best viewed in Webkit browsers (Chrome, Safari) or Firefox.
The concept, images, etc. all belongs to Google. I have just attempted to see how much of the Doodle could be achieved with only CSS3 with least images (and no JS ofcourse).
Here is a list of all the Google Doodles of past.