Updating animation-duration in Javascript

Question

After changing the animation-duration (or in this case, -webkit-animation-duration) property via JavaScript with setProperty(\"-webkit-animation-

Answer 1

It's not easy to restart CSS animation or change its parameter. However, I found some trick. See the following code. I separated the animation parameters into the class, which I add / remove. Plus the trick found in CSS-Tricks article and it works:

$(document).ready(function() {
  $('#slow-btn').click(function(){
    $('#testdiv').removeClass("testanimation");
    $('#testdiv').css("-webkit-animation-duration", "5s");
    $('#testdiv').get(0).offsetWidth = $('#testdiv').get(0).offsetWidth;
    $('#testdiv').addClass("testanimation");
  });
  $('#fast-btn').click(function(){
    $('#testdiv').removeClass("testanimation");
    $('#testdiv').css("-webkit-animation-duration", "1s");
    $('#testdiv').get(0).offsetWidth = $('#testdiv').get(0).offsetWidth;
    $('#testdiv').addClass("testanimation");
  });
});

#testdiv {
    display: block;
    position: absolute;
    left: 100px;
    width: 100px;
    height: 100px;
    background: red;
}
.testanimation {
    -webkit-animation: myanimation 2s linear alternate infinite;
    animation: myanimation 2s linear alternate infinite;
}
@-webkit-keyframes myanimation {
    from {left: 100px;}
    to {left: 400px;}
}
@keyframes myanimation {
    from {left: 100px;}
    to {left: 400px;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='testdiv' class='testanimation'></div>
<input id='slow-btn' type='button' value='slow' />
<input id='fast-btn' type='button' value='fast' />

Answer 2

Setting the style element directly using the [] to access either the vendor-prefixed or native css prop. will allow you to re-apply the animation duration property and change the rotational speed of the planet. No jquery needed. It's also worth mentioning that at the time of writing Firefox supports a non-prefixed version of the css property, while there is either mixed support or vendor-prefix support for other browsers. If considering using these animations, a given developer should seriously consider their potential user-base and probably not make this a core feature of web app. See more support info here:

http://caniuse.com/#feat=css-animation

Le code:

orbitFactor = 1e6

function updateSpeed(event) {
    var orbitDiv = document.getElementById("Mercury-orbit");
    orbitDiv.style["-webkit-animation-duration"] = event.target.value + "s";
}

function updateDiameter(event) {
    var planetDiv = document.getElementById("Mercury");
    planetDiv.style["width"] = event.target.value + "px";
    planetDiv.style["height"] = event.target.value + "px";
}

document.getElementById("orbit-period").addEventListener("change", updateSpeed);
document.getElementById("planet-diameter").addEventListener("change", updateDiameter);

Answer 3

in w3c standard, it says that it doesn't mention we can change the animation duration time or not. so it all depends on explorer.chrome yes, but ie no. So, we should update the whole animation when we want to change the time.

var animation = 'animationName time linear infinite'; var $element= $('selector').css('animation', 'none'); setTimeout(function(){ $element.css('animation', animation); }); this work on IE