Ajax Loader
×

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 <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:

10
X
×

Coding Preferences


HTML

CSS

Javascript

More

3 Comments

× New

Sign In to comment

dhavaljsoni:

Its Great..!
Working superb..Thank you so much.

LukyVj:

Hum, this not happen to me ... ?
Can you explain the bug you find little more ?

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+