jq如何让css3动画停止,jq中stop()方法停止不了css中animation

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

};