Page Tansitions

I am looking to create a page transition so that the page animated up from the bottom.
i have added a ‘load’ animation to the page so that when it loads it has the apearence of coming from the bottom, however this means that the page appears blank before it is loaded up. I would like the page to animate up from the bottom overlapping the page before hand.
I have tried added custom CSS code for this but none of it seems to be working. if anyone could help me with this it would be much appreciated.

Have you tried this?