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?