Delighters.JSはCSSアニメーションを追加して、スクロールしながらユーザーを楽しませてくれる、軽量のjavascriptライブラリ。

属性を追加

<div class="foo" data-delighter>

delighterに.startedと.endedクラスを組み込みます。
ライブラリがロードされると、data-delighterは.delighterクラスを取得します。

.foo.delighter {
　transition: all .3s ease-out;
　transform: translateX(-100%);
　opacity: 0;
}

.startedクラスはdata-delighter要素の上端がビューポートの0.75にあるときに設定されます。

.foo.delighter.started {
　 transform: none;
　 opacity: 1;
}

.endedクラスはdata-delighter要素の下端がビューポートの0.75にあるときに余分なクラスが設定されます。

.foo.delighter.started.ended {
　border: solid red 10px;
}