CSS & Javascript Manual Keyframe Animation

Question

Say I have an animation defined in css like so:

@keyframes my-animation {
    0% {
        // effect here
    }

    ...

    100% {
        // effect here
    }
}

I can use it in a div like so:

#container {
    animation: my-animation 10s linear ;
}

Is there any way I can use javascript to programmatically set the percentage of the animation at any point instead? Something along the lines of:

function() {
    let container = document.getElementById('container');
    while (some condition && container.percentage < 100) {
        container.percentage += 10;  // Here I would like to set the animation percentage to one of the percentages defined in the keyframe animation
    }
}

This is so I don't have to explicitly set the duration of the animation beforehand as it is unknown at runtime. I should add that I am aware that it currently is not possible to retrieve the percentage value of an animation but perhaps there is a way to manipulate it?

EDIT: From what I understand from the comment by lupz:

.animation0 { /* 0% */

    }

.animation10 { /* 10% */

    }

...

.animation100 { /* 100% */

    }

Then I can change the class of the element to whichever percentage I need.

Maybe you could achieve your goal by using CSS classes instead of keyframes (percentages) and use the transition property to get it moving. — lupz
– lupz, Commented Sep 20, 2020 at 12:50
@lupz Thanks for the suggestion. See my edit ... is that what you're suggesting? — Inkblot
– Inkblot, Commented Sep 20, 2020 at 12:57

Ori Drori · Accepted Answer · 2020-09-20 13:17:09Z

1

You can the JS animation API - Element.animate(), and then you can control the percentage (the offset property) directly via JS:

const container = document.querySelector('.container');

const animate = (offset = 1) => {
  const height = container.getBoundingClientRect().height;
  
  const animation = container.animate([
    {
      transform: 'translateY(0px)',
      offset: 0
    },
    {
      transform: `translateY(calc(100vh - ${height}px))`,
      offset
    }
  ], {
    duration: 1000,
  });
  
  if(offset > 0) {
    animation.finished
      .then(() => animate(offset - 0.1));
  }
};

animate();

html, body {
  margin: 0;
}

.container {
  width: 100px;
  height: 100px;
  background: silver;
}

<div class="container"></div>

answered Sep 20, 2020 at 13:17

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Inkblot Over a year ago

Thanks for the response. Where you have if(offset) > 0 ... could you possibly add an explanation of what that does and how I can use it to control the animation?

Ori Drori Over a year ago

If the offset (equivalent to the percentage) is over 0, we wait for the current animation to end (animation.finished is a promise), and when it's done, we start the next iteration with a smaller offset (removing 10% - or 0.1 from the offset).

Inkblot Over a year ago

Makes perfect sense, now how would I reference the percentage to change outside of the animation function?

Ori Drori Over a year ago

Use an external variable instead of passing it, to the next iteration.

Inkblot Over a year ago

Oh right, so instead of your if statement, I replace that with my code to increment the percentage?

|

Collectives™ on Stack Overflow

CSS & Javascript Manual Keyframe Animation

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related