Question

我希望在我的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');
  });

Answer 1

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

animation-fill-mode: forwards;

此前已在此处解决： Stopping a CSS3 Animation on last frame

Answer 2

我已经解决了。除了关键帧之外，一切都很完美。因为我首先旋转了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);}
    }

如何让关键帧动画在上一个动画中停止

2 个答案: