Can you change CSS3 animation keyframe attributes

问题:

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.

回答1:

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

回答2:

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

回答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/

回答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

回答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;

    }

}