title: Using two animations on one element, CSS
body: <p>I have two animations: on element load and hover:</p>
  
  <pre><code>div {
       animation: slide-up 2s;
      -webkit-animation: slide-up 2s;
      -moz-animation: slide-up 2s;
  }
  div:hover{
      animation: rotate 2s;
     -webkit-animation: rotate 2s;
     -moz-animation: rotate 2s;
  }
  </code></pre>
  
  <p>The <code>slide-up</code> animation runs once the element is loaded, and <code>rotate</code> runs when element is hovered. However, now the element slides up on mouse leave and I don't know how to prevent this. So I'd like to turn off <code>slide-up</code> animation on hover.</p>
  
  <p>The rotate animation uses <code>transform</code> property, and slide-up just changes <code>margins</code>.</p>