title: Hide element after fade out using only CSS
body: <p>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:</p>
  <ol>
  <li>The user clicks on a button</li>
  <li>An ajax call is done and while waiting for the response the page fades out (opacity: 0)</li>
  <li>If the server does not respond within 500 msec after the fade out finishes a spinner fades in and stays there until the ajax call finishes</li>
  <li>When receiving the response the spinner is faded out and the new page fades in.</li>
  </ol>
  <p>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).</p>
  <p>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?</p>