How to set animation attribute via js?

0

Well, I need to set an animation attribute in css via javascript. When a speed is greater than X put an animation and when smaller I put another

JS:

$(function() {
            $("li#liFluxo").click(function() {
                if(!document.getElementById("cbFluxo").checked){
                    document.getElementById("cbFluxo").checked = true;

                }else{
                    document.getElementById("cbFluxo").checked = false;
                }
                if(document.getElementById("cbFluxo").checked){
                    //RODOVIA 1
                    document.getElementById('sat1-1').style.display = 'block';document.getElementById('sat1-2').style.display = 'block';
                    document.getElementById('sat2-1').style.display = 'block';document.getElementById('sat2-2').style.display = 'block';

                    if(document.getElementById('speedSat14').value >= 60){
                        document.getElementById('sat141').style.background = "url('/POC/RESOURCES/images/userInterface/fluxoVerde.png')";

                    }
                    if(document.getElementById('speedSat14').value < 60){
                        document.getElementById('sat141').style.background = "url('/POC/RESOURCES/images/userInterface/fluxoVermelho.png')";
                        document.getElementById('sat141').style.animation = 'animatedBackgroundSat141 120s linear infinite';
                    }

                }
            });

            $("li#liFluxo").trigger("click");
        });

CSS:

@keyframes animatedBackground {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}
#sat141{
    background-image: url('/POC/RESOURCES/images/userInterface/fluxoVerde.png');
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);  
    opacity: 0.7;
    background-position: 0px 0px;
    background-repeat: repeat-x;


}

I just want to change the speed of the animation in: document.getElementById('sat141').style.animation = 'animatedBackgroundSat141 12s linear infinite'; But the animation stops, when it enters the if.

Can anyone help me?

    
asked by anonymous 09.11.2018 / 15:02

0 answers