Opacity based CSS only fade out / in with visibility: hidden / visible at the end of the transition

I have a one pager that shows one page at a time and that uses animation when transitioning from one page to the next. It works like this:

1. The user clicks on a button
2. An ajax call is done and while waiting for the response the page fades out (opacity: 0)
3. If 500 msec after the fade out finishes we have no response from the server a spinner fades in and stays there until the ajax call finishes
4. When receiving the response the spinner is faded out and the new page fades in.

I currently use a CSS 3 transition animation on the opacity of the page. This issue is however that during the time the spinner is visible the user can still interact with the (invisible) form of the page that just faded out (it's not gone, it's just invisible using opacity).

So I would like to have a CSS only solution that sets the page to visibility: hidden at the end of the transition (I cannot use display: none). What would be the way to go here?