Search code examples
cssanimationinfinite-loop

Break infinite animation in css

I am using css keyframes animation to make a ring rotate around an image. And the design is something like this:

sample image

And for this target, I use this css styling:

    .upload-logo {
      width: 150px;
      height: 150px;
      position: relative;
      cursor: pointer;
      .rings {
        border-right: 12px solid #a3a1fb;
        border-left: 12px solid #edecfe;
        border-radius: 50%;
        border-top: 12px solid #a3a1fb;
        border-bottom: 12px solid #edecfe;
        width: 100%;
        height: 100%;

        @-webkit-keyframes rotating /* Safari and Chrome */ {
          from {
            -webkit-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
          }
          to {
            -webkit-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
          }
        }
        @keyframes rotating {
          from {
            -ms-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
          }
          to {
            -ms-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
          }
        }
        &.rotating {
          -webkit-animation: rotating 2s linear infinite;
          -moz-animation: rotating 2s linear infinite;
          -ms-animation: rotating 2s linear infinite;
          -o-animation: rotating 2s linear infinite;
          animation: rotating 2s linear infinite;
        }
      }

This way, the ring, rotates around the circle inside, while the ring has class rotating. When I start the rotation everything is right, now the question is:

How to break the infinite animation, but let the current cycle to complete.

By now, I am removing the rotating class and the ring suddenly rolls back to its initial state which is bad indeed. I want just remove the infinite descriptor from animation params, to let it finish your job and stop please.

UPDATE

I have tested a way but it is not complete. The solution is to add another class to the element for example named stop. And then for this class I have written these styling:

        .stop{
          -webkit-animation-iteration-count: 1;
          -moz-animation-iteration-count: 1;
          -ms-animation-iteration-count: 1;
          -o-animation-iteration-count: 1;
          animation-iteration-count: 1;
        }

Now, if the job finishes in the middle of first round, it works fine and it finishes by completing the round, but if in the later rounds, it will break again suddenly.

Solution

  • There is no way without javascript.You need to use "animationiteration" event to remove the "rotating" class. so whenever you decide to set the current iteration the last one, add a "on" or "one" EventHandler to your element and inside the listener remove animation class.

    this should do the job :

    $(".rings").one('animationiteration', function() {
    $(this).removeClass("rotating");
});