Using JQuery $(class).css() halts CSS webkit animations?

Question

I have a CSS element referred to as .row, which looks as follows:

@-webkit-keyframes slideright {
    from        { background-position: left; }
    to      { background-position: right; }
}
.row {
width: 200%;
height: 100px;
-webkit-animation: slide 100s linear infinite;
}
.row.row-1 {
background-image: url(row/1.png);
-webkit-animation-name: slideright;
}

I want to change the animation speed (100s) using javascript or JQuery, to dynamic values. So I tried this:

$('.row').css({
'width':                '200%',
'height':               '100px',
    '-webkit-animation':    'slide 50s linear infinite'
});

This causes the animation to stop playing; the row does not move. I can change other values for instance height to 200px, and the height does change. The problem is, the animation is killed.

How can I solve this?

Answer 1

Does this have to be dynamic? Meaning, do you already know the new speed, or is it calculated by your JS? If you know the speed you wish to change to, your better bet (I think) is to setup two classes, and swap between them as you need (rather than attempt to modify the webkit-animation property directly)

@-webkit-keyframes slideright {
    from        { background-position: left; }
    to      { background-position: right; }
}
.row {
width: 200%;
height: 100px;
-webkit-animation: slide 100s linear infinite;
}
.row.new {
-webkit-animation: slide 50s linear infinite;
width: 200%; /* change other properties if needed */
}

.row.row-1 {
background-image: url(row/1.png);
-webkit-animation-name: slideright;
}

And your jQuery:

$('.row').addClass("new");