Is it possible to call an specific keyframe within a CSS animation?

Question

I'd been trying to render a CSS animation but affected by external dynamic values handled by JavaScript, so now I'm wondering if there's any way to move step by step throw the keyframes of a CSS animations.

Interesting question, actually; especially for testing. @dystroy That would test the more basic level, but if someone is applying curves for their keyframes, outside keyframes could have some influence on the resulting values. — Katana314
– Katana314, Commented Apr 24, 2014 at 15:49
@dystroy That way I'd would forced to code manually each step of the animation. Take for instance a 3d rotation, using keyframes you only need to setup the first and last frame, otherwise would be insane — Pablo Armentano
– Pablo Armentano, Commented Apr 24, 2014 at 15:54

Community · Accepted Answer · 2017-05-23 12:05:43Z

3

You can force an animation to start partway through by setting a negative animation delay.

(You would need to calculate the appropriate time value for the keyframe you want to display.)

Perhaps if you also set the animation state to paused, the animation would appear at the specified position, but would not move. I haven't tried it though!

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Jun 25, 2014 at 3:32

joeytwiddle

31.6k14 gold badges130 silver badges115 bronze badges

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

Collectives™ on Stack Overflow

Is it possible to call an specific keyframe within a CSS animation?

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related