title: overwriting css animation with !important
body: <p>So given this <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=223450" rel="nofollow noreferrer">bug</a> it's not reliable to overwrite an css animation using <code>!important</code>. </p>
  
  <p>However, I'm in the following situation: </p>
  
  <ol>
  <li>Open/ closing a list should be done by animating (using a css animation with keyframes) height on each of the elements in the list. </li>
  <li>an order-by dropdown allows the elements in the list to be reordered. This is implemented by doing a <code>(jquery) detach</code> on all elements followed by an <code>(jquery) append</code> in the correct order. I want the reorder to happen instantly, without animations. </li>
  </ol>
  
  <p>However, because of the detach/reattach the css animation kicks in again. resulting in a (albeit nicely animated) list growing from 0 height again to full-height no with elements in the correct order. </p>
  
  <p>How to make bullet 2. work? I can't use css-classes to overwrite the height property using !important, because of the bug mentioned above. It seems there's no way to overwrite the properties set by the animation.</p>
  
  <p>As an alternative I tried to set a css-class just before reorder (and remove just after reorder) that would do <code>animation: none</code>. Although that makes sure no animation happens during reorder, when I remove said class (and thus removing animation: none) AFTER the reorder happened, the initial css-class which has <code>animation: &lt;the fade in anim&gt;</code> for some reason kicks in the animation again, although it was already run once*</p>
  
  <p>Any way out of this catch-22?</p>
  
  <p>*) yeah I'm setting the animation as follows <code>animation: 0.2s ease 0s normal forwards 1 fadeinTdSpan;</code>, so it really should only run once. 
  However, probably due to adding the node to another parent, the cycle of animation restarts.</p>