Can I set the progress of a keyframe animation to a specific stage?

Question

I have a keyframe animation with multiple steps:

@keyframes rotateLeftSideCustom {
    0% {
    }
    40% {
        -webkit-transform: rotateY(-15deg);
        transform: rotateY(-15deg);
        opacity: .8;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform: scale(0.8) translateZ(-200px);
        transform: scale(0.8) translateZ(-200px);
        opacity: 0;
    }
}

.section-animation {
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-animation: rotateLeftSideCustom 0.6s both ease-in;
    animation: rotateLeftSideCustom 0.6s both ease-in;
}

Is there any way I can use JavaScript to set the progress of the animation?

Eg:

document.querySelector('.section-animation').animationState('40%');

Context: I'm trying to build a draggable interface where I need to align the progress of the animation with the amount of dragging the user does.

Firefox has an `AnimationEvent` they're proposing, which could be used to manage this sort of thing. It's nowhere near ready to use in a production environment, unfortunately:https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent/AnimationEvent — Josh from Qaribou, Apr 21 '15 at 14:08
is there no way you could use `transition`? if the animations are simple linear things then you probably don't need keyframes, might be worth a look — Toni Leigh, Jun 22 '15 at 06:44
How would I change the state of an active transition (say, set it to `60%` progress) though? — nils, Jun 22 '15 at 07:46

Lorenz Merdian · Answer 1 · 2015-04-21T14:27:40.020

7

Did I get it right, that you want to start the the animation not at 0%, but at 40%?

There's a way to do it CSS-only, by using negative value for animation-delay

.section-animation {
    animation-delay: -0.24s; /*40% of 0.6s */
}

Additionally, you might want to add

.section-animation {
    animation-play-state: paused;
}

to your element, so that you might can see the state of the animation as a static image, not animated.

Here's a link: https://css-tricks.com/starting-css-animations-mid-way/

edited Apr 21 '15 at 14:27

answered Apr 21 '15 at 14:21

Lorenz Merdian

722
3
14

2

I'm trying to dynamically update the animation status, not just the starting point, but maybe this works like that as well. – nils Apr 21 '15 at 14:29
You might run into ugly computations when you have a animation with an animation-delay by itself. But even then, this should be not overly complex. – Lorenz Merdian Apr 21 '15 at 14:32
1

Best answer on here - everyone else is just suggesting to use an external animation library, but if there's one thing I like to avoid vendor-reliance on, it's animations. It's especially helpful to keep things CSS, since then you know resource-limited devices like phones will be optimized for it. If you use a CSS transpiler, like less or sass, you could manage that delay number quite easily by using variables. – Josh from Qaribou Apr 21 '15 at 16:25
@JoshfromQaribou that answer isn't suggesting that Nils wants to dynamically update his animation status. It's just about delay and pausing/starting. But you are right, with less or sass you can handle this, I haven't thought on that. – webprogrammer Apr 22 '15 at 08:46
1

@webprogrammer You could still set the `animation-delay` property via javascript, triggered by some events. – Lorenz Merdian Apr 22 '15 at 12:55
1

@LorenzMerdian you can't set the animation state though. My two solutions provides the only possibility so far. – webprogrammer Apr 22 '15 at 14:40

webprogrammer · Answer 2 · 2015-04-21T14:59:36.403

1

You could use jQuery for animation. With .animate() you have a property step.

animate API

From the docs:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    position: relative;
    background-color: #abc;
    width: 40px;
    height: 40px;
    float: left;
    margin: 5px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p><button id="go">Run »</button></p>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

<script>
$( "#go" ).click(function() {
  $( ".block:first" ).animate({
    left: 100
  }, {
    duration: 1000,
    step: function( now, fx ){
      $( ".block:gt(0)" ).css( "left", now );
    }
  });
});
</script>

</body>
</html>

Where *now* is the actual state of your animation.

UPDATE

Propably you can use requestAnimationFrame but this is also like my other solution. The difference is - that it's pure JavaScript, so no external library needed.

edited Apr 21 '15 at 14:59

answered Apr 21 '15 at 14:07

webprogrammer

792
15
26

Thank you, that's a good solution for simple animations. When the animation involves multiple steps, it might get a bit messy though. – nils Apr 21 '15 at 14:19
OP is asking about keyframes and how to edit them dynamically, not about alternative solutions, if it isn't possible to do, resulting in an external library a relevant answer, then please explain how – Toni Leigh Jun 19 '15 at 11:48
@ToniLeigh in pure CSS you can't edit things dynamically... also there is no build-in possibility to do that dynamically. Basically you just can use a 3rd party solution based on javascript. But that means you loose the hardware acceleration for CSS. – webprogrammer Jun 22 '15 at 05:59

Can I set the progress of a keyframe animation to a specific stage?

2 Answers2

Linked