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

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

No. since the animation is not declared in the element, it's only called upon it. It's like trying to add methods into an object instead of to a class. Not possible, sorry ;)

I was searching for a solution for inline keyframe too. At least for the "to" value. CSS Tricks give a good solution, just forget the "to" and place the width inline ;) http://css-tricks.com/animate-to-an-inline-style/