Javascript 如何使关键帧动画在最后一个动画中停止_Javascript_Jquery_Html_Css_Animation

Javascript 如何使关键帧动画在最后一个动画中停止

javascript jquery html css animation

Javascript 如何使关键帧动画在最后一个动画中停止,javascript,jquery,html,css,animation,Javascript,Jquery,Html,Css,Animation,我希望在100%关键帧上停止动画在这里，jQuery显示在底部。我想完全弄清楚的是如何制作这些盒子的动画，这样如果你点击上面的盒子，它就会移动到底部，然后底部的盒子就会移动到顶部。有什么想法吗 <html> <head> <meta charset="utf-8"> <title></title> <style> @keyframes active { 0% {

我希望在100%关键帧上停止动画

在这里，jQuery显示在底部。我想完全弄清楚的是如何制作这些盒子的动画，这样如果你点击上面的盒子，它就会移动到底部，然后底部的盒子就会移动到顶部。有什么想法吗

<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    @keyframes active {
      0% {
        transform: translateX(0px);
      }
      33% {
        transform: translateX(105px);
      }
      66% {
        transform: rotateY(180deg) translateY(210px);
      }
      100% {
        transform: rotateY(0deg) translateY(210px);
      }
    }
      .all-wrap {border: 1px solid black;
      }
      .container {width:100px;height:100px;background-color:red;
        perspective:400px;perspective-origin:50% 100px;
        margin-right:auto;
        display: block;
        border: 2px solid purple;
        animation-fill-mode: forwards;
        background-repeat: no-repeat;
      }
      .containerActive {
        animation: active 3s ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        transform-style: preserve-3d;
        animation-direction: normal;
        }
    </style>
  </head>
  <body>
    <div class="all-wrap">
      <div class="container">
      </div>
      <div class="container">
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="/js/rotate.js"></script>
  </body>
</html>

/* Here is the jQuery: */

$('[class*="container"]').on('click', function(){
    $(this).toggleClass('containerActive');
  });


@关键帧处于活动状态{
0% {
转换：translateX（0px）；
}
33% {
转化：translateX（105px）；
}
66% {
变换：旋转（180度）平移（210像素）；
}
100% {
变换：旋转（0度）平移（210像素）；
}
}
.所有包装{边框：1px纯黑色；
}
.容器{宽度：100px；高度：100px；背景色：红色；
透视：400px；透视原点：50%100px；
右边距：自动；
显示：块；
边框：2件纯色紫色；
动画填充模式：正向；
背景重复：无重复；
}
.containerActive{
动画：活动3s轻松输入输出；
动画填充模式：正向；
动画迭代次数：1；
变换样式：保留-3d；
动画方向：正常；
}
/*以下是jQuery：*/
$（'[class*=“container”]'）。在（'click'，function（）上{
$（this.toggleClass（'containerActive'）；
});

应使用以下代码在100%关键帧上停止：

animation-fill-mode: forwards;

这一点以前已在此处讨论过：

我已经解决了。除了我的关键帧，一切都很完美。因为我一开始让它旋转180度，这意味着它将以100%的速度再旋转180度，以回到它原来的方向。我不能100%申报，因为我需要100%才能得到正确的译文。所以我想出了一个聪明的主意，让旋转度变成我想要的一半怎么样？这将使它看起来像一个完整的回合

关键帧：

@keyframes active {
        0% {transform: translateX(0px);}
       25% {transform: translateX(105px);}
       50% {transform: translate(105px, 105px);}
       75% {transform: rotateY(90deg) translate(-105px, 105px);}
      100% {transform: translate(0px, 105px);}
    }
@keyframes active2 {
        0% {transform: translateX(0px);}
       25% {transform: translateX(105px);}
       50% {transform: translate(105px, -105px);}
       75% {transform: rotateY(90deg) translate(-105px, -105px);}
      100% {transform: translate(0px, -105px);}
    }

我不知道为什么这会被否决。我知道这是包含在原始代码中的。这个问题肯定存在于其他地方。我提供的代码是正确的。