Task:  Create a simple animation using Java-Script and CSS, with a sprite-sheet, that responds to clicking on specific buttons.

interactive-animation-assignment

Solution: I made the animation using a sprite sheet:

ramonawalkspritesheet

And multiple background layers:

thepieces-02

thepieces-06

thepieces-1

thepieces-05

thepieces-04

+ the blue sky was made out of a <div> and the sidewalk was also made out of a thin, horizontal <div>.

I animated it all with CSS and added the button triggers with JavaScript.

Link:  http://www.toonstalesandtools.com/animationwithbuttons/thespritesheet.html

What I could have done better:

This animation does not work on every single browser (it actually only works on Google Chrome for me). Only the play/pause button works on all browsers.