Can you change CSS3 animation keyframe attributes inline (i.e. in the HTML style attribute)?

Question

Is it possible to change the animation keyframe attributes by making inline adjustments.

Take for example

@-moz-keyframes slidein {     from {         width: 10%;     }      to {         width:50%;     } } 

Would it be possible to change the width attribute in the 'to' portion of the keyframe, by doing something like

<div id="someID" style="change keyframe here"> 

For the time being I am just creating an entire style sheet dynamically on the page in order to customize the keyframes.

This method works, however I would much rather adjust the attributes inline for simplicity.

Answer 1

Hey so lets think a little different... You may not be able to do this...

<div id="someID" style="change keyframe here"> 

but think of doing it like this...

<script> var createdStyleTag = document.createElement("style"); createdStyleTag.textContent = "@-*whatevaVendor*-keyframes someAnimationName{"+     "from { width: **SOMETHING YOU DECLARE THROUGH JS**; }"+     "to{ width: 10%; }"+ "}";  document.body.appendChild(createdStyleTag); </script> 

This is pretty open to whatever you want to do... you would always have the classes you will put on elements but sometimes we dont want to constantly have the same "from" and "to" so this can be one way to do this... basically you dynamically create a style element put whatever string that will end up being the needed style text and then append it to the body... works pretty good... used it in my own framework... I don't do it exactly like this but I wrote it out like this for visibility... reason why this works in a good way is cause a lot of my DOM is created dynamically as well so it may make more sense in that implementation...

Nothing is impossible... just think outside the div