是否可以从JavaScript更改CSS翻译距离值

我在css中有这段代码：

/*Animation Styles*/
.anim1 {
  -webkit-animation: anim1 5s; /* Chrome, Safari, Opera */
  animation: anim1 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes anim1 {
  to {
    background: yellow;
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }
}
/* Standard syntax */
@keyframes anim1 {
  to {
    background: yellow;
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }
}

是否可以通过javascript将0px更改为其他内容？

这是我目前的尝试——参考这个SO答案：

// Setup animation classes
var setupAnimClasses = function(){
    var caroWidth = caroWrapper.offsetWidth;
    var caroHeight = caroWrapper.offsetHeight;
    var style = document.createElement('style');
    style.type = 'text/css';
    for(var i in pageQueue){
        var caroX = caroWidth * i; 
        style.innerHTML += "'
            .caroAnimp"+i+" {'n'
                -webkit-animation: animp"+i+" 0.6s; /* Chrome, Safari, Opera */'n'
                animation: animp"+i+" 5s;'n'
            }'n'
            @-webkit-keyframes animp"+i+" {'n'
                to {'n'
                    -webkit-transform:translateX("+caroX+"px);'n'
                    -ms-transform:translateX("+caroX+"px);'n'
                    transform:translateX("+caroX+"px);'n'
                }'n'
            @keyframes animp"+i+" {'n'
                to {'n'
                    background: yellow;'n'
                    -webkit-transform:translateX("+caroX+"px);'n'
                    -ms-transform:translateX("+caroX+"px);'n'
                    transform:translateX("+caroX+"px);'n'
                }'n'
            }'n";
    }
    style.setAttribute('class','caroAnimStyles');
    document.getElementsByTagName('head')[0].appendChild(style);
};
setupAnimClasses();

这运行良好，并产生：

.caroAnimp0 {
    -webkit-animation: animp0 0.6s; /* Chrome, Safari, Opera */
    animation: animp0 5s;
}
@-webkit-keyframes animp0 {
    to {
        -webkit-transform:translateX(0px);
        -ms-transform:translateX(0px);
        transform:translateX(0px);
    }
@keyframes animp0 {
    to {
        background: yellow;
        -webkit-transform:translateX(0px);
        -ms-transform:translateX(0px);
        transform:translateX(0px);
    }
}
.caroAnimp1 {
    -webkit-animation: animp1 0.6s; /* Chrome, Safari, Opera */
    animation: animp1 5s;
}
@-webkit-keyframes animp1 {
    to {
        -webkit-transform:translateX(1434px);
        -ms-transform:translateX(1434px);
        transform:translateX(1434px);
    }
@keyframes animp1 {
    to {
        background: yellow;
        -webkit-transform:translateX(1434px);
        -ms-transform:translateX(1434px);
        transform:translateX(1434px);
    }
}
.caroAnimp2 {
    -webkit-animation: animp2 0.6s; /* Chrome, Safari, Opera */
    animation: animp2 5s;
}
@-webkit-keyframes animp2 {
    to {
        -webkit-transform:translateX(2868px);
        -ms-transform:translateX(2868px);
        transform:translateX(2868px);
    }
@keyframes animp2 {
    to {
        background: yellow;
        -webkit-transform:translateX(2868px);
        -ms-transform:translateX(2868px);
        transform:translateX(2868px);
    }
}
.caroAnimp3 {
    -webkit-animation: animp3 0.6s; /* Chrome, Safari, Opera */
    animation: animp3 5s;
}
@-webkit-keyframes animp3 {
    to {
        -webkit-transform:translateX(4302px);
        -ms-transform:translateX(4302px);
        transform:translateX(4302px);
    }
@keyframes animp3 {
    to {
        background: yellow;
        -webkit-transform:translateX(4302px);
        -ms-transform:translateX(4302px);
        transform:translateX(4302px);
    }
}
.caroAnimp4 {
    -webkit-animation: animp4 0.6s; /* Chrome, Safari, Opera */
    animation: animp4 5s;
}
@-webkit-keyframes animp4 {
    to {
        -webkit-transform:translateX(5736px);
        -ms-transform:translateX(5736px);
        transform:translateX(5736px);
    }
@keyframes animp4 {
    to {
        background: yellow;
        -webkit-transform:translateX(5736px);
        -ms-transform:translateX(5736px);
        transform:translateX(5736px);
    }
}
.caroAnimp5 {
    -webkit-animation: animp5 0.6s; /* Chrome, Safari, Opera */
    animation: animp5 5s;
}
@-webkit-keyframes animp5 {
    to {
        -webkit-transform:translateX(7170px);
        -ms-transform:translateX(7170px);
        transform:translateX(7170px);
    }
@keyframes animp5 {
    to {
        background: yellow;
        -webkit-transform:translateX(7170px);
        -ms-transform:translateX(7170px);
        transform:translateX(7170px);
    }
}

但是，当使用此代码时：

$("tag")[0].setAttribute('class','caroAnimp1')，什么也没发生。

不管我穿什么标签，什么都不会发生。只有当应用了一个类，并且在类更改时删除了设置时才会发生这种情况。