CSS delayed spinner

How to make delayed effect of a DOM change via CSS3 transitions.

HTML

<div id="container">
  <div id="spinner"></div>
  <div id="message">
    This spinner is delayed about 3/4 of a second by css.<br>
    Click to toggle it on / off (removal is instantaneous).
  </div>
</div>

CSS

.loading #spinner {
  opacity: 1;
  /* Chrome/FF4+/IE10+/Opera hack to make the spinner show up after 0.75s */
          transition: opacity 0.75s cubic-bezier(1,0,0.1,0);
       -o-transition: opacity 0.75s cubic-bezier(1,0,0.1,0);
      -ms-transition: opacity 0.75s cubic-bezier(1,0,0.1,0);
     -moz-transition: opacity 0.75s cubic-bezier(1,0,0.1,0);
  -webkit-transition: opacity 0.75s cubic-bezier(1,0,0.1,0);
}

#spinner {
  opacity:          0;
  width:            48px;
  height:           48px;
  pointer-events:   none;
  background-image:...

JavaScript

$('#container')
  .addClass('loading')
  .click(function() { $(this).toggleClass('loading'); });
                $.getJSON("https://mitchellbreden.nl/deltion1/semester2/json/bier.php";
                          $('#container').hide();
  .addClass('loading')
  .click(function() { $(this).toggleClass('loading'); });