Nice little library by Martin Kool / Q42.
Delighters.js toggles classnames as you scroll. You do the rest!
Late 2013 I created a likewise thingy (dependent on jQuery) 
The main class toggled is .delighter, with an extra .started or .ended to know if the animation just started or ended.
/* when the library loads, each [data-delighter]
gets the .delighter class */
.foo.delighter {
transition: all .3s ease-out;
transform: translateX(-100%);
opacity: 0;
}
/* the .started class is set when the top
of [data-delighter] is at 0.75 of the viewport
(where 0 is top and 1 is bottom) */
.foo.delighter.started {
transform: none;
opacity: 1;
}
/* an extra .ended state is set when the bottom
of [data-delighter] is at 0.75 of the viewport
(where 0 is top and 1 is bottom) */
.foo.delighter.started.ended {
border: solid red 10px;
}