By animowały się jakiekolwiek właściwości, prócz końcowej wartości musi być ustawiona wcześniej początkowa wartość.
Do tego właściwosć transistion powinna znajdować się w klasie "głównej", tzn. po prostu w .header, .main, .footer, a nie w .active.
W innym wypadku, animacja zostanie zastosowana tylko dla "wejścia", "wyjście" będzie po prostu zwyczajnym przeskoczeniem elementów.
http://codepen.io/anon/pen/vLNJxj
Taki efekt chciałeś uzyskać? :)
Rzeczy, które zmieniłem:
dla .header, .main, .footer:
+ position: absolute
+ z-index: 0;
+ width: 100%;
+ transition: all 0.5s linear;
+ poszczególne wartości top.
dla .active
- position: absolute;
- left: 0;
- bottom: 0;
- right: 0;
- width: 100%;
- transition: all 0.5s linear;