CSS动画如何从动画转换到静止状态

Question

下面是我的代码：

https://jsbin.com/hibiviwuki/1/edit?html,css,js,output

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)

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

如果不控制JS中的动画，这是可能的吗？

Answer 1

如果我没理解错的话：

​

$( document ).ready(function() {
    $('card').click(function () {
      // Add animation class
      $(this).toggleClass('active');
      
      // Listen to animation end event
      $(this).one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
        
        // Remove the class
        $(this).toggleClass('active');
      });
    });
});

/* https://jsbin.com/yujacagero/1/edit?html,css,js,output */

card {
  background: #f00;
  border: 1px solid #000;
  width: 40px;
  height: 40px;
  margin: 20px;
  display: block;
  transition: all 2s ease;
  filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.4)) drop-shadow(0 -1px 2px #008000);
  transform: scale(1) rotate(0);
}
card.active {
  animation: randanims 2s;
  animation-iteration-count: 1;
  animation-direction: alternate;
}
@-moz-keyframes randanims {
  0% {
    transform: scale(1) rotate(180deg);
    filter: drop-shadow(1rem 1rem 1px rgba(0,0,0,0.4)) drop-shadow(0 -5px 12px #008000);
  }
  25% {
    transform: scale(2) rotate(180deg);
    filter: drop-shadow(1rem 1rem 1px rgba(0,0,0,0.4)) drop-shadow(0 -5px 12px #008000);
  }
  50% {
    transform: translate(20px) scale(0.5) rotate(0deg);
    filter: drop-shadow(1rem 1rem 1px rgba(0,0,0,0.4)) drop-shadow(0 -5px 12px #008000);
  }
  75% {
    transform: scale(2) rotate(-180deg);
    filter: drop-shadow(1rem 1rem 1px rgba(0,0,0,0.4)) drop-shadow(0 -5px 12px #008000);
  }
  100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.4)) drop-shadow(0 -1px 2px #008000);
  }
}
@-webkit-keyframes randanims {
  0% {
    transform: scale(1) rotate(180deg);
    filter: drop-shadow(1rem 1rem 1px rgba(0,0,0,0.4)) drop-shadow(0 -5px 12px #008000);
  }
  25% {
    transform: scale(2) rotate(180deg);
    filter: drop-shadow(1rem 1rem 1px rgba(0,0,0,0.4)) drop-shadow(0 -5px 12px #008000);
  }
  50% {
    transform: translate(20px) scale(0.5) rotate(0deg);
    filter: drop-shadow(1rem 1rem 1px rgba(0,0,0,0.4)) drop-shadow(0 -5px 12px #008000);
  }
  75% {
    transform: scale(2) rotate(-180deg);
    filter: drop-shadow(1rem 1rem 1px rgba(0,0,0,0.4)) drop-shadow(0 -5px 12px #008000);
  }
  100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.4)) drop-shadow(0 -1px 2px #008000);
  }
}
@-o-keyframes randanims {
  0% {
    transform: scale(1) rotate(180deg);
    filter: drop-shadow(1rem 1rem 1px rgba(0,0,0,0.4)) drop-shadow(0 -5px 12px #008000);
  }
  25% {
    transform: scale(2) rotate(180deg);
    filter: drop-shadow(1rem 1rem 1px rgba(0,0,0,0.4)) drop-shadow(0 -5px 12px #008000);
  }
  50% {
    transform: translate(20px) scale(0.5) rotate(0deg);
    filter: drop-shadow(1rem 1rem 1px rgba(0,0,0,0.4)) drop-shadow(0 -5px 12px #008000);
  }
  75% {
    transform: scale(2) rotate(-180deg);
    filter: drop-shadow(1rem 1rem 1px rgba(0,0,0,0.4)) drop-shadow(0 -5px 12px #008000);
  }
  100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.4)) drop-shadow(0 -1px 2px #008000);
  }
}
@keyframes randanims {
  0% {
    transform: scale(1) rotate(180deg);
    filter: drop-shadow(1rem 1rem 1px rgba(0,0,0,0.4)) drop-shadow(0 -5px 12px #008000);
  }
  25% {
    transform: scale(2) rotate(180deg);
    filter: drop-shadow(1rem 1rem 1px rgba(0,0,0,0.4)) drop-shadow(0 -5px 12px #008000);
  }
  50% {
    transform: translate(20px) scale(0.5) rotate(0deg);
    filter: drop-shadow(1rem 1rem 1px rgba(0,0,0,0.4)) drop-shadow(0 -5px 12px #008000);
  }
  75% {
    transform: scale(2) rotate(-180deg);
    filter: drop-shadow(1rem 1rem 1px rgba(0,0,0,0.4)) drop-shadow(0 -5px 12px #008000);
  }
  100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.4)) drop-shadow(0 -1px 2px #008000);
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>

<body>
  <card></card>
  <card class="active"></card>
</body>

</html>

​

带手写笔的Updated JSBin