title: CSS animation interfering with transform transition
body: <p>I want to apply a hover animation on the class <code>circle</code> and on click of the <code>circle</code> I want it to transition smoothly to its desired position but I can't get that transition to work. Without the hover animation, the transition works fine, but as soon as I add the animation on hover, the transition doesn't apply anymore.</p>
  <p>Here's the code</p>
  <pre><code>&lt;div class=&quot;doc&quot;&gt;
  &lt;!--   TRANSITION NOT WORKING W/ HOVER ANIMATION --&gt;
    &lt;div id=&quot;mainContainer&quot; class=&quot;container&quot;&gt;
    &lt;div id=&quot;circle&quot; class=&quot;circle&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>
  <pre><code>.container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border: 3px solid black;
  }
  
  .circle {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background: red;
    transition: all 1s ease;
  }
  
  .move {
    transform: translateX(50px);
  }
  
  .container:hover &gt; .circle {
    animation: moveUp 1s infinite ease;
  }
  
  .container:hover &gt; .move {
    animation: none;
  }
  
  
  @keyframes moveUp {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
    80% {
      transform: translateY(0);
    }
  }
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>document.getElementById(&quot;mainContainer&quot;).onclick = function() {
  var element = document.getElementById(&quot;circle&quot;);
    element.classList.add(&quot;move&quot;);
  }
  </code></pre>
  <p>And here's the fiddle:
  <a href="https://jsfiddle.net/bshm0xca/58/" rel="nofollow noreferrer">https://jsfiddle.net/bshm0xca/58/</a></p>
  <p>The box on the right is the desired transition effect
  The box on the left has a hover animation, but once I click on the container, the circle will snap to the transformed position instead of transitioning to it.</p>
  <p>Why is this happening?? How do I get the circle to animate on hover and transition on click?</p>
  <p>Thank you!</p>