CSS Animation - Change %

Question

I have an animation made in CSS in which, I want to change the %(or keyframe) whenever a user clicks a button.Means, the animation should continue playing but from thew specified keyframe now matter which keyframe it currently is in. The HTML is like this:

<!DOCTYPE html>
<html>
<head>
<style>
.animate{
  animation:main 5s infinite;
}
@ keyframes main{
  0%{color:#000000;}
  25%{color:#FF0000;}
  50%{color:#00FF00;}
  75%{color:#0000FF;}
  100%{color:#000000;}
}
</style>
</head>
<body>
<div id="animate" class="animate">Some text</div>
<div onclick="change()">Change frame</div>
</body>
</html>
<script>
function change(){
  document.getElementById("animate").style.frame=50%;   //need help here
}
</script>

The animation is working fine. The problem is, I couldn't find any property which I can use to change keyframes(object.style.frame is no property!!)

Is there any such property that exists to do this?? Does anyone know what property that is??

Your help is much appreciated

why dont you have a second @keyframes calles secondary or something and have its 0% keyframe be what ever main's 50% keyframe is — GifCo, Aug 28 '14 at 18:00
I [made a demo](http://jsfiddle.net/82pwzf77/2/) that you can fiddle with @RevanProdigalKnight. — Kraz, Aug 28 '14 at 18:37
possible duplicate of [Set Webkit Keyframes Values Using Javascript Variable](http://stackoverflow.com/questions/10342494/set-webkit-keyframes-values-using-javascript-variable) — Kraz, Aug 28 '14 at 18:40

score 0 · Answer 1 · answered Aug 28 '14 at 18:34

Based on what you are saying it looks as though you'll need to separate each keyframe and call it through the script for each instance of that element. This is something you could do with jQuery I believe, though it would require coding and implementation, of course.

Looking at it from a scrict CSS and CSS animation standpoint, unless you have an engine or other script to call these keyframe instances through js or CSS it's stacking the code from scratch.

I believe this is what @GifCo is driving at as well, if I'm not mistaken. You could very well do it that way just the same, it may become a little confusing and take more--I suppose, "looping" though--on the coding end because the method is more circular rather than linear, I think coding each keyframe instance from one to the next would be more straightforward.

I'm not going to code it out here, but 1 being 0%, 2 being 25% and so on, it'd be something like: 1=0%, calls 1-5 to animate, 2=25%, calls 1-5 to animate and so on. Of course you will need to find a way to differentiate between these between both the script and the stylesheet otherwise you'll just call them all at once when the animation plays. 5 keyframes, animated 5 times each for each instance leaves you with 25 animations, each requiring a code snippet to run.

Hope I was able to lend a brain and help in some way, hope it all made at least some level of sense, cheers and happy coding my friend! :)

CSS Animation - Change %

1 Answers1