How to reverse animation on hovering off element?

Question

Im trying to animate a button up to the center of it's parent element on hover using translateY and CSS3 animations, this seems to work fine (although any advice improvements would be great) but the problem is as soon as I hover off the button doesn't reverse the animation instead just resetting back to -50px. Was wondering how I can achieve this?

CSS (Using SCSS + Compass)

@include keyframe(slideIn) {
  0%{
    //opacity:0;
    -webkit-transform:translateY(-50px);
  }
  60%{ 
    //opacity:1;
    //-webkit-transform:translateY(-195px);
  }
  80%{
    -webkit-transform:translateY(-188px);
  }
  100%{
    -webkit-transform:translateY(-175px);
  }
}


.box {
  width: 300px;
  height: 300px;
  background: navy;
  position: relative;
  -webkit-transform: translate3d(0, 0, 0);
  overflow: hidden;

  &:hover {
    .btn {
      @include animation(slideIn .45s ease-in-out alternate forwards);
    }
  }
}

.btn {
  width: 50px;
  height: 50px; 
  position: absolute;
  bottom: -50px;
} 

Codepen - http://codepen.io/styler/pen/fpFlL

Answer 1

You can define 3 css classes:

.box{
   //base css here
}

.box.out{
     animation-name: out;
     animation-duration:.45s;
 }

 .box.over{
     animation-name: in;
     animation-duration:.45s;
 }

 @keyframe in {
     //your keyframe animation here
 }

 @keyframe out {
     //reverse animation here
 }

Then some javascript to detect hovers:

$(".box").hover(
    function () {
        $(this).removeClass('out').addClass('over');
    },
    function () {
        $(this).removeClass('over').addClass('out');
    }
); 

Answer 2

You should put the css animation on the button and not on the hover.

.box {
      width: 300px;
      height: 300px;
      background: navy;
      position: relative;
      -webkit-transform: translate3d(0, 0, 0);

      &:hover {
        .btn {
          bottom: 150px;

        }
      }
    }

    .btn {
      width: 50px;
      height: 50px; 
      position: absolute;
      bottom: -50px;  
      -webkit-transition-duration: 0.3s;
      -moz-transition-duration: 0.3s;
      -o-transition-duration: 0.3s;
      transition-duration: 0.3s;
    } 

http://codepen.io/anon/pen/qGxBh