我有一个简单的车轮旋转动画.我试图使用滑块(输入范围)控制旋转轮的速度.我已设法做到这一点,但每次我更改动画时动画重新启动(它跳转).寻找一种解决方案,以创造一个平稳的速度增长.当用户增加滑块的值时,轮子以增加的速度旋转.
在下面的代码中,#loading是旋转轮.
$(document).on('input', '#slider', function() {
var speed = $(this).val();
$('#speed').html(speed);
$("#loading").css("animation-duration", 50 / speed + "s");
});#loading {
position: absolute;
left: 0;
right: 0;
margin: auto;
transform-origin: 50% 50%;
animation: rotateRight infinite linear;
animation-duration: 0;
}
@keyframes rotateRight {
100% {
transform: rotate(360deg);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<img id="loading" src="//placehold.it/100">
<input type="range" min="0" max="100" value="0" class="slider" id="slider">
<p>Speed: <span id="speed"></span></p>