Curtain Reveal エフェクトってありますよね。
あれ結構好きなので、CSS でできないものかと考えていました。
1個だけなら The CSS Ninja の人がやっていた Curtain reveal effect using CSS でできるんですが、何重にも重ねてやりたかったんですね。
プレゼンのスライドで使えるような、フルページな感じで。
現状ではかなり環境が限られますが、なんとかできました。

position: sticky が動作する環境でご覧ください。

フルページ

もちろん、JavaScript を使えばもっと柔軟にできます。
高さが決まっていないものに使う場合はそうしてください。

参考：CSS でペライチ