title: CSS hover animations playing on page load
body: <p>I've been playing around with animations on hover with pure CSS, applying the animation to element:hover and then the same animation to the regular element in reverse so that when the mouse is moved away the element returns to it's original state, this works fine however any animation that is fired when a user moves their mouse away from an element also runs on page load. I understand why this happens, but I would like to know if there's a way to stop it at all? Preferably not using JS but I don't see how that would be possible really </p>
  
  <p>Current code being used, simple animations on hover:</p>
  
  <pre><code>.image{
    animation: hoverout 1s ease-in-out forwards;
  }
  
  .image:hover{
    animation: hover 1s ease-in-out forwards;
  }
  
  @keyframes hover{
    0%{
      opacity: 0;
    }
  
    100%{
      opacity: 0.5;
    }
  }
  
  @keyframes hoverout{
    0%{
      opacity: 0.5;
    }
  
    100%{
      opacity: 0;
    }
  }
  </code></pre>