旋转饼图 - 使用JQuery改变动画持续时间导致动画＆＃39;跳跃＆＃39;

Question

我创建了一个使用CSS动画旋转的饼图。

HTML

<pie class="ten"></pie>

CSS

@-webkit-keyframes circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

pie {
    width: 180px;
    height: 180px;
    display: block;
    border-radius: 50%;
    background-color: red;
    margin: 1em;
    -webkit-animation: circle 2s linear infinite;
}

.ten {
    background-image:
        linear-gradient(115deg, transparent 50%, white 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
    transition: all 500ms;
}

我想改变它在1秒间隔内旋转的动画持续时间。我在setInterval中使用了jQuery .css来执行此操作。

setInterval(function() {
    var watt = Math.random() * 3
    $('.ten').css('animation-duration', watt+'s');
}, 1000);

问题是，当重置css动画持续时间时，旋转动画似乎在向前旋转之前向后跳跃。

我想知道是否有一种方法可以平滑地转换动画速度变化，让动作以不同的速度连续旋转而不会有这些跳跃。

以下是代码：https://jsfiddle.net/hexaballs/c3vbvarx/

非常感谢任何建议或意见。非常感谢提前！