0

My application generates animations dynamically in server code. For the element to be animated, I apply the animation styles in-line, like so (the element IDs are GUIDs with a letter prefix to prevent collision):

<div class="ScrollingDiv" style="width: 100%; height: 27px;">
    <p id="p9a6960428d594935b2540b1f8466f47a" style="animation:scroll-p9a6960428d594935b2540b1f8466f47a 10s linear infinite; width: 131px; height: 27px; transform: translateX(640px); -moz-transform: translateX(640px); -webkit-transform: translateX(640px); -moz-animation: scroll-p9a6960428d594935b2540b1f8466f47a 10s linear infinite; -webkit-animation: scroll-p9a6960428d594935b2540b1f8466f47a 10s linear infinite;">
        This is a test
    </p>
</div>

and assign that as the InnerHtml of the container. I also generate on the server side the keyframes, like so:

@keyframes scroll-p9a6960428d594935b2540b1f8466f47a { 0% { transform: translateX(640px); } 100% { transform: translateX(-131px); } }

and put them in a hidden field on the form for the client to add to the style sheet using Eli Grey's approach in this post. 

function pageLoad(sender, args) {
    var oStyleSheet = document.styleSheets[0];
    oStyleSheet.insertRule(rule, oStyleSheet.cssRules.length);
}

I've verified that the style and rules are working in this Fiddle but it's not working when I add them programmatically. I can watch in the debugger that oStyleSheet is getting a new entry in its cssRules property. Any ideas as to either a) why it's not working or b) (better yet) how I can debug this myself?

Community
  • 1
  • 1
John Riehl
  • 1,270
  • 1
  • 11
  • 22

1 Answers1

0

I didn't read all the way to the bottom of the answer I cited. Turns out that you have to stop then restart the animation for changes to the style sheet to take effect.

John Riehl
  • 1,270
  • 1
  • 11
  • 22