title: Hold the transform position of an animation while on hover
body: <p>I want a text to move a few pixels up when on hover. Let's say I want the animation to last 2 seconds but if after those 2 seconds I'm still on hover I don't want the animation to repeat again and again. I just want the position of my text to hold where it is while I'm on hover.</p>
  
  <p>I tried this but not working: </p>
  
  <pre><code>.css-class:hover {
    animation-name: in;
    animation-duration: 2s infinite;
    animation-iteration-count: infinite;
  }
  
  .css-class {
    animation-name: out;
    animation-duration:2s;
  }
  
  @keyframes in {
    from {transform: translateY(0px);}
    to {transform: translateY(-35px);}
  }
  
  @keyframes out {
     from {transform: translateY(-35px);}
     to {transform: translateY(0px);}
  }
  </code></pre>
  
  <p>Thanks in advance.</p>