Yesterday I posted a CSS version of Google's recent Doodle. Today I did a bit more work on it to make it animate more like the original version. I'll mention the process that I followed for more accuracy.

First of all it was important to change the radio input to a checkbox input so that when the player button is re-clicked (clicked again, after playing), the animation stops/pauses. Also the player image is a <img> element now, instead of being a background to the <label> element. This helped in getting rid of the player-slide keyframes by using simple transitions to slide the <img> .

Next, a new parent div has been introduced for the grids and the horse image has been set as a background image to the new div instead of the small divs. Then I applied a 5 second transition to the background-position of the new container to imitate the rewind effect. The rewind effect is then followed by the normal animation which has an animation-delay set to 5 seconds to let the rewind effect occur entirely.

Related: