title: CSS3 animations work on click
body: <p>I'm attempting to make a welcome page that, once you click on it, will fall by a CSS transition.
  I can't figure out how to make the page fall, I can only make the button fall when the page loads.</p>
  
  <p>here's what I have:</p>
  
  <pre><code>&lt;style&gt;
  pt-page-rotateFall {
      -webkit-transform-origin: 0% 0%;
      transform-origin: 0% 0%;
      -webkit-animation: rotateFall 1s both ease-in;
       animation: rotateFall 1s both ease-in;} 
  a {
      color:black;
        text-align:center;
        -moz-transition:all 1s ease; -webkit-transition:all 1s ease;        transition:all 1s ease;
      -o-transition:all 1s ease; -ms-transition:all 1s ease;
  }
  a:focus {
  0% { -webkit-transform: rotateZ(0deg); }
  20% { -webkit-transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; }
  40% { -webkit-transform: rotateZ(17deg); }
  60% { -webkit-transform: rotateZ(16deg); }
  100% { -webkit-transform: translateY(100%) rotateZ(17deg); }
  
  0% { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); }
  20% { -webkit-transform: rotateZ(10deg); transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
  40% { -webkit-transform: rotateZ(17deg); transform: rotateZ(17deg); }
  60% { -webkit-transform: rotateZ(16deg); transform: rotateZ(16deg); }
  100% { -webkit-transform: translateY(100%) rotateZ(17deg); transform: translateY(100%) rotateZ(17deg); }
  </code></pre>
  
  <p>}</p>
  
  <p></p>
  
  <p></p>
  
  
  
  Welcome