javascript - JQuery $(class).css() を使用すると、CSS Webkit アニメーションが停止しますか?

Question

次のような .row と呼ばれる CSS 要素があります。

@-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;
}

JavaScript または JQuery を使用して、アニメーションの速度 (100 秒) を動的な値に変更したいと考えています。だから私はこれを試しました：

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

これにより、アニメーションの再生が停止します。行は移動しません。インスタンスの高さなどの他の値を 200px に変更すると、高さが変わります。問題は、アニメーションが殺されることです。

どうすればこれを解決できますか?