title: What does animation:none do exactly?
body: <p>I've got an HTML element here with this starting style:
     <code>transition: transform 2s;</code></p>
  
  <p>First, it is <strong>animated</strong> (it rotatesX) via a class that is added on click. On the next click, another class is added that adds a <strong>transform3d</strong> that should move the element vertically and this should take 2 seconds as per the rule above. </p>
  
  <p>The <strong>transform3d</strong> doesn't take effect unless I add this rule to the element: <code>animation: none</code> as well. I am confused on what <code>animation: none</code> actually does. Are there complications with transforming an element that has had an animation applied to it?</p>