programmatically changing webkit-transformation values in animation rules

Question

I have this stylesheet:

        @-webkit-keyframes run {
            0% {
                -webkit-transform: translate3d(0px, 0px, 0px);
            }                


        

Answer 1

I used warmanp's solution and it worked, but with a bit of very important tweaking.

$('#ticket-marquee-css').text(
    "@-webkit-keyframes marqueeR{ 0%{text-indent: -" + distanceToMove + "px;} 100%{text-indent: 0;} }" + 
    "@-webkit-keyframes marqueeL{ 0%{text-indent: 0;} 100%{text-indent: -" + distanceToMove + "px;} }"
);

In order to get the CSS transition to update, instead of using the previously-defined values, I had to make the animation stop, then restart. To do this, I placed a class of "active" on the elements, and made the CSS only apply the transition to the elements that had that class

#marquee1.active {-webkit-animation-name: marqueeL;}
#marquee2.active {-webkit-animation-name: marqueeR;}

Then I just had to toggle the "active" class off, wait for it to apply in the DOM (hence the setTimeout), then reapply it.

$('.ticket-marquee').removeClass('active');
setTimeout(function() { $('.ticket-marquee').addClass('active'); },1);

And that works great! Now I can dynamically change the distance the text moves!