Google Doodle in CSS - Follow Up
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
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.
- Interactive Canvas Map
- Dusty Particle Sphere
- Pure CSS3 Dial Clock
- Pure CCS3 Digit Clock
- Month Picker