title: ASP.NET AJAX--styleSheet.insertRule() not working as expected
body: <p>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):</p>
  
  <pre><code>&lt;div class="ScrollingDiv" style="width: 100%; height: 27px;"&gt;
      &lt;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;"&gt;
          This is a test
      &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and assign that as the <code>InnerHtml</code> of the container.  I also generate on the server side the keyframes, like so:</p>
  
  <pre><code>@keyframes scroll-p9a6960428d594935b2540b1f8466f47a { 0% { transform: translateX(640px); } 100% { transform: translateX(-131px); } }
  </code></pre>
  
  <p>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 <a href="https://stackoverflow.com/questions/5105530/programmatically-changing-webkit-transformation-values-in-animation-rules">this</a> post.  </p>
  
  <pre><code>function pageLoad(sender, args) {
      var oStyleSheet = document.styleSheets[0];
      oStyleSheet.insertRule(rule, oStyleSheet.cssRules.length);
  }
  </code></pre>
  
  <p>I've verified that the style and rules are working in <a href="https://jsfiddle.net/m3v40hx6/" rel="nofollow noreferrer">this Fiddle</a> but it's not working when I add them programmatically.  I can watch in the debugger that <code>oStyleSheet</code> is getting a new entry in its <code>cssRules</code> property.  Any ideas as to either a) why it's not working or b) (better yet) how I can debug this myself?</p>