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

这会导致动画停止播放；该行不移动。我可以将其他值（例如高度）更改为 200 像素，并且高度确实会改变。问题是，动画被杀死了。

我该如何解决这个问题？

Answer 1

这必须是动态的吗？意思是，你已经知道新的速度，还是你的JS计算出来的？如果您知道要更改的速度，最好的选择（我认为）是设置两个类，并根据需要在它们之间进行交换（而不是尝试直接修改 webkit-animation 属性）

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

还有你的 jQuery：

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