1

I have this code in 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);
  }
}

Is it possible to change 0px to something else via javascript?

Here's my current attempt -- referencing this SO answer:

// 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();

This runs fine and produces:

.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);
    }
}

However, when using this code:

$("tag")[0].setAttribute('class','caroAnimp1'), nothing happens.

It doesn't matter what tag I try this on, nothing happens. The only time something happens if it there was a class applied and the settings got removed at the class change.

Community
  • 1
  • 1
JVE999
  • 3,327
  • 10
  • 54
  • 89
  • 1
    yes ... you can change it directly or by changing the class... – rafaelcastrocouto Oct 29 '14 at 23:37
  • If you are able to change the CSS, there would be a better way of doing this using `transition` on the `transform` property, then applying your new transform property inline using javascript. – CaribouCode Oct 29 '14 at 23:39
  • How would I access the property `@keyframes anim1 { to { transform: translateX(0px)...` in order to change it to say `translateX(400px)`? – JVE999 Oct 29 '14 at 23:43

2 Answers2

0

You can use Jquery to accomplish this: For Example:

$(<myelement>).css('-webkit-transform', 'translateX(0px, 70px)');
codeviper
  • 78
  • 10
  • The issue with jQuery is that I do now know of a way to use jQuery functions on a specific dom element, like `$("div")[0]` or `document.getElementById('div1')` – JVE999 Oct 30 '14 at 00:02
0

Either you jQuery's CSS property

$('.anim1').css({"-webkit-transform":"translate(0px,70px)"});​

Or you can use the addClass method.

Define the CSS transition:

CSS

.animate{
    -webkit-transform:translate(0px,70px);
}

jQuery

 $('.anim1').addClass('.animate');
Zentaurus
  • 758
  • 2
  • 11
  • 27
Edward
  • 3,061
  • 6
  • 32
  • 52