如何在CSS动画结束时添加淡出？

Question

动画：http://codepen.io/leongaban/pen/wJAip

如果单击 Animate Down 按钮，jQuery会将.animateDown类添加到微调器。然后，微调器将动画降至0，然后再次弹回到全尺寸。

如何在CSS的末尾添加一个新的关键帧，以便在缩小后隐藏微调器？

或的

在jQuery中，我会在旋转器缩小到0然后隐藏（）它时监听吗？

CSS：

.animateDown {
    -webkit-animation: animateDown .3s ease-in-out;
    animation: animateDown .3s ease-in-out;
}

@-webkit-keyframes animateDown { 
    0%  {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% { 
       -webkit-transform: scale(0);
       transform: scale(0);
    }
}

jQuery的：

$('#animate-down').unbind('click').bind('click', function() {
    $('#spinner').removeClass('animateUp');
    $('#spinner').addClass('animateDown');
});

Answer 1

喜欢这个？ http://codepen.io/anon/pen/sypjf

您可以使用'转发'，以便CSS动画不会重复：

.animateUp {
  -webkit-animation: animateUp .6s ease-in-out forwards;
  animation: animateUp .6s ease-in-out forwards;
}
.animateDown {
  -webkit-animation: animateDown .3s ease-in-out forwards;
  animation: animateDown .3s ease-in-out forwards;
}

并向关键帧添加不透明度：0，以便元素变得不可见（与$ .hide（）不完全相同：

@-webkit-keyframes animateDown { 
0%  {
  -webkit-transform: scale(1);
  transform: scale(1);

  }
100% { 
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  }
}

另外不要忘记添加-moz前缀，您的演示目前在Firefox中不起作用。

Answer 2

另外，对于纯CSS解决方案，请查看animation-fill-mode

在您的情况下：animation-fill-mode: forwards;

唯一的问题可能是跨浏览器兼容性。

Answer 3

如果我正确理解问题，您需要附加一个回调到css动画。这样的事情。

$(".animateDown").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("fin") 
});

见HERE

编辑：还有一个纯JS版本，但我喜欢我的jQuery：）。