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 {
               


        

Answer 1

Here's a way to do this using CSS variables:

<div style="--from-width:10px; --to-width:20px; animation:slide 1s ease infinite;"></div>

@keyframes slide {
  from {
    width: var(--from-width);
  }

  to {
    width:var(--to-width);
  }
}

That obviously won't work for all cases, but if you just need to customize some numbers in an existing set of keyframes, then it may work for you.

Answer 2

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 ;)

Answer 3

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/

Answer 4

This solution sounds a lot like the one you may already be implementing, but it's very well explained and thought out: Set Webkit Keyframes Values Using Javascript Variable

Answer 5

as @Zetura said the best way to do it is to forget the "to" property and it will take the default value of the width or height or any thing you put it to the as example for me its work :

@keyframes slideInUp {
    0% {
        height: 0px;

    }

}

Answer 6

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