css动画和jquery动画基本上是两套东西，jquery的stop只能停止jquery的动画(至于为什么不能停你得了解js动画原理)
你的需求是没法用css动画实现的，控制不了那么细，得完全用js动画
查了下mdn，好像火狐上有些api可以控制css动画
以下代码仅火狐可用，且在about:config中开启dom.animations-api-getAnimations.enabled和dom.animations-api.timelines.enabled
Title
@keyframes zhuan {
100% {
transform: rotate(360deg)
}
}
.shanye {
animation: zhuan 4s infinite linear forwards;
transform-origin: 15px 115px;
border-radius: 50%;
width: 30px;
height: 30px;
position: absolute;
background: skyblue;
left: calc(50% – 15px);
top: -15px
}
低速
中速
高速
var slow = document.getElementById(‘slow’);
var middle = document.getElementById(‘middle’);
var high = document.getElementById(‘high’);
var shanye = document.getElementById(‘shanye’);
slow.onmouseenter = function () {
const progress = shanye.getAnimations()[0].effect.getComputedTiming().progress;
shanye.getAnimations()[0].effect.updateTiming({iterationStart: progress, duration: 8000});
shanye.getAnimations()[0].startTime=document.timeline.currentTime
};
middle.onmouseenter = function () {
const progress = shanye.getAnimations()[0].effect.getComputedTiming().progress;
shanye.getAnimations()[0].effect.updateTiming({iterationStart: progress, duration: 4000});
shanye.getAnimations()[0].startTime=document.timeline.currentTime
};
high.onmouseenter = function () {
const progress = shanye.getAnimations()[0].effect.getComputedTiming().progress;
shanye.getAnimations()[0].effect.updateTiming({iterationStart: progress, duration: 2000});
shanye.getAnimations()[0].startTime=document.timeline.currentTime
};
随便找了个js动画库写了个js动画，这个应该大部分浏览器都能正常展示(研究了下jquey动画没有想到简单方法做这个需求)
Title
.shanye {
/*animation: zhuan 4s infinite linear forwards;*/
transform-origin: 15px 115px;
border-radius: 50%;
width: 30px;
height: 30px;
position: absolute;
background: skyblue;
left: calc(50% – 15px);
top: -15px
}
低速
中速
高速
var slow = document.getElementById(‘slow’);
var middle = document.getElementById(‘middle’);
var high = document.getElementById(‘high’);
var shanye = document.getElementById(‘shanye’);
var myAnimation = TweenMax.to(‘.shanye’, 2, {rotation: 360, repeat: Number.POSITIVE_INFINITY, ease: ‘linear’});
// console.log(test);
slow.onmouseenter = function () {
const progress = myAnimation.progress();
myAnimation.duration(8).progress(progress);
};
middle.onmouseenter = function () {
const progress = myAnimation.progress();
myAnimation.duration(4).progress(progress);
};
high.onmouseenter = function () {
const progress = myAnimation.progress();
myAnimation.duration(2).progress(progress);
};