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

Well from your example it seems to me that CSS animations may be overkill. Use transitions instead:

-webkit-transition: -webkit-transform .4s linear; /* you could also use 'all' instead of '-webkit-transform' */

and then apply a new transform to the element via js:

$("<yournode>")[0].style.webkitTransform = "translate3d(0px,"+ (height*i) +"px,0px)";

It should animate that.