title: Why is transform:scale not kept on :hover?
body: <p>I am using this CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.link {
      transition: all .2s ease-in-out;
  }
  .link:hover {
      transform: scale(1.1);
  }
  </code></pre>
  
  <p>When I hover the text, it's scaled to 110% as expected, but as soon as the transition is finished, it scales back to 100% even though the mouse pointer is still on the text.</p>
  
  <p>When I remove the mouse pointer from the text, the animation scales to 110% then back to 100% in a flash.</p>
  
  <p>See <a href="https://jsfiddle.net/4dy4r89e/1/" rel="nofollow">this fiddle</a> for a demo.</p>
  
  <p><strong>How can I make it keep the 110% scale until the pointer leaves the text?</strong></p>