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-duration", value + "s"), I see the change in the element inspector in Chrome, but the actual animation speed doesn't change. In addition, if I manually change the value in the element inspector, there is no change either.

I've got an input field set up to take an animation speed value, which is connected to the following event listener (orbitFactor is a global var defined elsewhere):

function updateSpeed(event) {
     var planetDiv = document.getElementById(event.target.id);
     planetDiv.style.setProperty("width", event.target.value / orbitFactor);
     planetDiv.style.setProperty("height", event.target.value / orbitFactor);
     planetDiv.style.setProperty("-webkit-animation-duration", event.target.value + "s");
}

The event listener is definitely getting called, and the -webkit-animation-duration value does change in the element inspector, but the speed of the animation doesn't. Is there something I'm missing here with regards to -webkit-animation-duration? The other properties I'm changing (e.g. width and height) using the same method do change visibly.

Thanks in advance

EDIT: Note that this is a problem in Chrome 40, but it works properly in Chrome 42 and Firefox 35.

Have you tried it w/o the vendor prefix? (e.g.: just `animation-duration`) — markthethomas, Jan 30 '15 at 18:11
Weird. Can you put up a fiddle with more of your code so I can tinker with it? — markthethomas, Jan 30 '15 at 18:17
http://jsfiddle.net/p2osaaL3/1/ - the input field to update the diameter works fine, but the animation one doesn't. (You'll notice that the animation-duration value does change if you check the element inspector, but the change isn't visible) — ryantmer, Jan 30 '15 at 18:40
Looks to me like there was an issue accessing the right property -- it applies the change when you target it as `-webkit-animation- http://jsfiddle.net/p2osaaL3/3/` — markthethomas, Jan 30 '15 at 18:52
That appears to be the same fiddle - do you mean replacing "-webkit-animation-duration" with just "-webkit-animation" in the event handler? — ryantmer, Jan 30 '15 at 18:59
Yeah; that made it work for me. I also made a few small changes to clean up the `setProperty` calls: http://jsfiddle.net/p2osaaL3/6/. Let me know if that's not working in your enviro — markthethomas, Jan 30 '15 at 19:03
Huh, still doesn't work for me. Maybe this is a bug with my version of Chrome or something? — ryantmer, Jan 30 '15 at 19:06
Yup, looks like a Chrome or webkit-animation bug (I'm on the main release, 40). Just grabbed Firefox and it works fine. Thanks for the help! :) — ryantmer, Jan 30 '15 at 19:11
No problem! I'll put an answer below, just in case anyone else sees this in the future — markthethomas, Jan 30 '15 at 19:11

score 6 · Accepted Answer · answered Jan 30 '15 at 19:13

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

score 2 · Answer 2 · answered Jan 30 '15 at 19:13

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' />

The number of times `$('#testdiv')` is queried w/ $ is pretty redundant here; would be better to alias it once and ref it from there. Or, better yet, not have to use jquery :) — markthethomas, Jan 30 '15 at 19:15
@markthethomas Well, it's a quick demo to show the idea and not a real well-written and optimized code ;) — Alexander Dayan, Jan 30 '15 at 19:19
Yes...but we can avoid accruing technical debt by trying to avoid these sort of things up front :) also, FWIW, there's no jquery tag on the question. I always try to stick to the OP's tags a guideline for the answer scope -- I've seen too many newbies ask a basic question and get a jquery (or other) answer that doesn't help them learn anything or actually explain the answer -- too much 'magic' code — markthethomas, Jan 30 '15 at 19:21

score 1 · Answer 3 · answered Nov 29 '16 at 03:22

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

Updating animation-duration in Javascript

3 Answers3

Linked

Related