css - 如何在悬停元素时反转动画？

Question

我正在尝试使用 translateY 和 CSS3 动画将按钮设置为悬停在其父元素中心的动画，这似乎工作正常(尽管任何建议改进都会很棒)但问题是一旦我悬停按钮不会反转动画，而只是重置回 -50px。想知道如何实现这一目标吗？

CSS(使用 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

您可以定义 3 个 css 类:

.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
 }

然后是一些 javascript 来检测悬停:

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