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

user_453547 0
Viewed 32040

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.

animation css html
6 Answers

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.

user_119507640
Related