如何在这个CSS动画的末尾添加一个淡出？

Question

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

​

​

如果单击动画下按钮，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前缀，您的演示程序目前在火狐中不起作用。

Answer 2

同样，对于纯CSS解决方案，请看一看动画填充模式

在您的例子中：animation-fill-mode: forwards;

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

Answer 3

如果我正确理解这个问题，您需要将回调附加到css动画中。就像这样。

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

如所见，这里

编辑:也有一个纯JS版本，但我喜欢我的jQuery :)。