Set CSS 'animation' progress-percent

Question

Here's a snippet that changes the height of a div when 'HERE' is clicked.

I want the click to change the percent of the animation-progress instead (for example, to 50%). How can that be achieved?

function f() {
  document.getElementById('id1').style.height = "10px";
}

@keyframes k {
  0% {
    background-color: red;
  }
  100% {
    background-color: blue;
  }
}

.a {
  height: 100px;
  width: 100px;
  animation: k 10s infinite;
}

<div id="id1" class="a"></div>
<div onclick="f()">HERE</div>

For an old user in here like yourself, you should've learned how to ask a question by now. — Rainbow, Jun 19 '18 at 22:18
@KoshVery You know how the square is purple in the middle of the 10 seconds? Well, I want it to change to that color onclick. (And continue the animation to blue from there.) — ispiro, Jun 19 '18 at 22:22
Your question made me think of this question. I don't know that it's a duplicate, but it deals with changing properties of an animation mid interpolation: [CSS change animation duration without jumping](https://stackoverflow.com/q/47578337/691711). — zero298, Jun 21 '18 at 22:23

score 2 · Accepted Answer · answered Jun 21 '18 at 21:56

2

You might use WAAPI (and its polyfill if needed):

const hop = (t) => a.currentTime = options.duration * t,

  keyframes = [
    {transform: 'translateX(-100px)', background: 'red'},
    {transform: 'translateX(100vw)', background: 'blue'}
  ],

  options = {
    duration: 4000,
    iterations: Infinity
  },

  a = document.getElementById('id1').animate(keyframes, options)

#id1 {height: 100px; width: 100px;}

<!-- polyfill -->
<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>

<div id="id1"></div>

<!-- 0.5 is for 50% here -->
<button onclick="hop(0.5)">HERE</button>

answered Jun 21 '18 at 21:56

Kosh

16,966
2
19
34

Thanks. But I've been trying for some time now to get the existing animation of the element (from which I'll try getting the `currentTime`). And failing. (For example `elementById.style.animation`.) – ispiro Jun 22 '18 at 14:39
@ispiro, happy to help: element itself does not contain `currentTime` but you can use `Animation` object or calculate `currentTime` comparing the element's `style` and `computedStyle`. BTW, you asked _"I want the click to change the percent of the animation-progress instead (for example, to 50%). How can that be achieved?"_ and you've received the answer with a working snippet and links to resources. Could you please explain why this answer is not accepted? – Kosh Jun 22 '18 at 15:15
I don't understand what you meant by `use Animation object` - But I can't get the animation. That's the problem. – ispiro Jun 22 '18 at 15:37
I'll gladly accept the answer when I am able to use it. Currently it relies on an external source, and I don't know how to use it in the case I described in the question where the animation has already been set. (which is more similar to my use case). Can you clarify how I can get the animation time of an existing animation (without an external library)? – ispiro Jun 22 '18 at 15:41
I'm using Firefox, BTW. According to [this](https://developer.mozilla.org/en-US/docs/Web/API/Animation) it's supposed to support this stuff natively. (Firefox Quantum v 60.0.2) – ispiro Jun 22 '18 at 15:49
@ispiro, Yes, polyfill is needed for older browsers only. – Kosh Jun 22 '18 at 15:51
Strange. It works from the snippet. But doesn't in Visual Studio. Despite a simple copy-paste. – ispiro Jun 22 '18 at 15:56

Set CSS 'animation' progress-percent

1 Answers1