title: How do I make a div fly off the screen on click?
body: <p>Okay so i've got this round div.</p>
  
  <pre><code>&lt;div id = "dot"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>With this styling, it flies off the screen when you hover over it.</p>
  
  <pre><code>#dot {
    height: 75px;
    width: 75px;
    background-color: red;
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
    top: 30vh;
    transition: all 2s;
  }
  
  #dot:hover {
    top: -1000vh;
  }
  
  #dot {
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
  }
  </code></pre>
  
  <p>I want the fly-off-the-screen transition to occur when the dot is clicked, and I'm looking for a solution that is pure CSS or vanilla javascript. If it's of any significance, the dot is ultimately gonna be wrapped in an a link element, and its dramatic exit will herald the load of a new page.</p>
  
  <p>Bonus question: if this round div eventually has an SVG in it, will that negatively affect its performance/appearance? </p>