title: How to stop transforms in a CSS transition
body: <p>I have set a CSS transition like </p>
  
  <pre><code> transition: all 2s 
  </code></pre>
  
  <p>Then I apply a CSS to change the transform like:</p>
  
  <pre><code> transform: rotate(20deg); 
  </code></pre>
  
  <p>Transition starts.</p>
  
  <p><strong>I want to stop it midway and have it stay there so I can then apply some other JS on it that is application dependent... what that is post-pausing is  irrelevant to the question</strong> To test, I use:</p>
  
  <pre><code> setTimeout(function() {
     ...
   }, 1000);
  </code></pre>
  
  <p>One crude way to stop the transition is to set CSS display to 'none'.
  Setting transform to 'none' or empty string does not work. The transition goes to the end for transform. Another trick of resetting the CSS to the current one,  works for other properties but not for transforms. Setting transition property to none or empty string also does not stop the transition's transform.</p>
  
  <p>Surely there must be some way.</p>
  
  <p>Any suggestion? Preferrably in JQuery
  <strong>I do not want to use animation.</strong></p>