How to get keyframes animation to stop on last animation

Question

I'm looking to stop my animation on my 100% keyframe.

Here it is, jQuery is shown at bottom. What I'm trying to figure out completely is how to animate these boxes so that if you click on whichever one is on the top, it moves to the bottom, and then the bottom one moves to the top. Any ideas?

<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');
  });

score 0 · Accepted Answer · edited May 23 '17 at 11:54

0

Stopping on the 100% keyframe should be fulfilled with this code:

animation-fill-mode: forwards;

This has been previously addressed here: Stopping a CSS3 Animation on last frame

edited May 23 '17 at 11:54

Community

1
1

answered Mar 20 '17 at 00:37

Peter Cadwell

109
1
5

Not sure why this would get a down vote. I know this was included with the original code. The problem must exist elsewhere. The code I provided is correct. – Peter Cadwell Mar 20 '17 at 01:35

score 0 · Answer 2 · answered Mar 20 '17 at 06:16

I've solved it. Everything was perfect besides my key frames. Since I had it rotating 180 degrees at first, that means that it is going to rotate another 180 degrees at 100% to get back to it's original orientation. I can't declare it at 100% because I need 100% to have the correct translation. So I came up with a clever idea, how about making the rotation degrees half of what I want it to be? This would give it the appearance of a full turn.

Key frames:

@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);}
    }

How to get keyframes animation to stop on last animation

2 Answers2