Javascript CSS动画如何从动画过渡到静止状态

这是我的密码：

我试着让它在2秒内平稳地过渡到静止位置。现在它从动画状态跳到没有动画的状态

---

在不控制JS中的动画的情况下，这可能吗？

如果我理解正确：

$（文档）.ready（函数（）{
$（“卡”）。单击（函数（）{
//添加动画类
$（this.toggleClass（'active'）；
//收听动画结束事件
$（this）.one（“animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd”，function（））{
//删除该类
$（this.toggleClass（'active'）；
});
});
});
/*https://jsbin.com/yujacagero/1/edit?html，css，js，输出*/
卡片{
背景：#f00；
边框：1px实心#000；
宽度：40px；
高度：40px；
利润率：20px；
显示：块；
过渡：一切都很轻松；
过滤器：投影（2px2px1pRGBA（0,0,0,0.4））投影（0-1px2p008000）；
变换：缩放（1）旋转（0）；
}
主动卡{
动画：randanims 2s；
动画迭代次数：1；
动画方向：交替；
}
@-moz关键帧randanims{
0% {
变换：缩放（1）旋转（180度）；
过滤器：投影（1rem 1rem 1px rgba（0,0,0,0.4））投影（0-5px 12px 008000）；
}
25% {
变换：缩放（2）旋转（180度）；
过滤器：投影（1rem 1rem 1px rgba（0,0,0,0.4））投影（0-5px 12px 008000）；
}
50% {
变换：平移（20px）比例（0.5）旋转（0度）；
过滤器：投影（1rem 1rem 1px rgba（0,0,0,0.4））投影（0-5px 12px 008000）；
}
75% {
变换：缩放（2）旋转（-180度）；
过滤器：投影（1rem 1rem 1px rgba（0,0,0,0.4））投影（0-5px 12px 008000）；
}
100% {
变换：缩放（1）旋转（0度）；
过滤器：投影（2px2px1pRGBA（0,0,0,0.4））投影（0-1px2p008000）；
}
}
@-webkit关键帧randanims{
0% {
变换：缩放（1）旋转（180度）；
过滤器：投影（1rem 1rem 1px rgba（0,0,0,0.4））投影（0-5px 12px 008000）；
}
25% {
变换：缩放（2）旋转（180度）；
过滤器：投影（1rem 1rem 1px rgba（0,0,0,0.4））投影（0-5px 12px 008000）；
}
50% {
变换：平移（20px）比例（0.5）旋转（0度）；
过滤器：投影（1rem 1rem 1px rgba（0,0,0,0.4））投影（0-5px 12px 008000）；
}
75% {
变换：缩放（2）旋转（-180度）；
过滤器：投影（1rem 1rem 1px rgba（0,0,0,0.4））投影（0-5px 12px 008000）；
}
100% {
变换：缩放（1）旋转（0度）；
过滤器：投影（2px2px1pRGBA（0,0,0,0.4））投影（0-1px2p008000）；
}
}
@-o-关键帧randanims{
0% {
变换：缩放（1）旋转（180度）；
过滤器：投影（1rem 1rem 1px rgba（0,0,0,0.4））投影（0-5px 12px 008000）；
}
25% {
变换：缩放（2）旋转（180度）；
过滤器：投影（1rem 1rem 1px rgba（0,0,0,0.4））投影（0-5px 12px 008000）；
}
50% {
变换：平移（20px）比例（0.5）旋转（0度）；
过滤器：投影（1rem 1rem 1px rgba（0,0,0,0.4））投影（0-5px 12px 008000）；
}
75% {
变换：缩放（2）旋转（-180度）；
过滤器：投影（1rem 1rem 1px rgba（0,0,0,0.4））投影（0-5px 12px 008000）；
}
100% {
变换：缩放（1）旋转（0度）；
过滤器：投影（2px2px1pRGBA（0,0,0,0.4））投影（0-1px2p008000）；
}
}
@关键帧randanims{
0% {
变换：缩放（1）旋转（180度）；
过滤器：投影（1rem 1rem 1px rgba（0,0,0,0.4））投影（0-5px 12px 008000）；
}
25% {
变换：缩放（2）旋转（180度）；
过滤器：投影（1rem 1rem 1px rgba（0,0,0,0.4））投影（0-5px 12px 008000）；
}
50% {
变换：平移（20px）比例（0.5）旋转（0度）；
过滤器：投影（1rem 1rem 1px rgba（0,0,0,0.4））投影（0-5px 12px 008000）；
}
75% {
变换：缩放（2）旋转（-180度）；
过滤器：投影（1rem 1rem 1px rgba（0,0,0,0.4））投影（0-5px 12px 008000）；
}
100% {
变换：缩放（1）旋转（0度）；
过滤器：投影（2px2px1pRGBA（0,0,0,0.4））投影（0-1px2p008000）；
}
}

JS-Bin
谢谢，虽然这回答了问题，但对我来说有点困难，因为动画没有意识到结束状态。尝试将一组不同的组件连接在一起。在动画结束时，您可以添加下一个动画类。如果你能提供额外的HTML/动画，有人可能会有更好的解决方案
card
  background red
  border 1px solid black
  width 40px
  height 40px
  margin 20px
  display block
  transition 2s
  filter drop-shadow(2px 2px 1px rgba(0, 0, 0, .4)) drop-shadow(0 -1px 2px green)
  transform scale(1) rotate(0)

  &.active
    animation randanims 2s
    animation-iteration-count infinite
    animation-direction alternate


@keyframes randanims
  0%
    transform scale(2) rotate(180deg)
    filter drop-shadow(1rem 1rem 1px rgba(0, 0, 0, .4)) drop-shadow(0 -5px 12px green)

  50%
    transform translate(20px) scale(.5) rotate(0deg)
    filter drop-shadow(1rem 1rem 1px rgba(0, 0, 0, .4)) drop-shadow(0 -5px 12px green)

  100%
    transform scale(2) rotate(-180deg)
    filter drop-shadow(1rem 1rem 1px rgba(0, 0, 0, .4)) drop-shadow(0 -5px 12px green)