我有一个动画移动带有关键帧的图像的background-position，效果很好。
虽然，当用户单击按钮时，我想暂停背景动画，但有一个过渡，放慢速度然后停止 background-position 移动。
我搜索了类似的东西，但我没有找到任何东西，所以我想知道你们中是否有人知道我该怎么做？
谢谢。
【问题讨论】：
标签： html css css-animations
没有。您无法通过 CSS 动画仅使用一个元素来实现这一点，原因如下：
paused 是一个即时操作。在元素上应用动画后，它会控制该属性，直到将其移除。因此，用 JS 更改 background-position 也将没有效果（即使它实际上已暂停）。
来自W3C Spec：
CSS 动画影响计算的属性值。在动画执行期间，属性的计算值由动画控制。这会覆盖在正常样式系统中指定的值。
可以在下面的 sn-p 中看到一个示例。与animation-play-state: paused 一起，被切换的类也为background-position 设置了一个特定值（重要），但它对元素绝对没有影响。 JS 中被注释掉的部分是我试图以较慢的速度逐渐停止但它不起作用的方式。
var el = document.getElementsByTagName('div')[0];
var btn = document.getElementById('stop');
var i = 0,
bgPosX,
interval,
state = 'running';
btn.addEventListener('click', function() {
/* state = (state == 'running') ? 'paused' : 'running';
console.log(state);
if (state == 'paused') {
var currPos = window.getComputedStyle(el).backgroundPositionX;
bgPosX = parseInt(currPos.replace('px', ''), 10);
interval = setInterval(function() {
slowPause(bgPosX);
}, 1);
} else {
el.style.backgroundPosition = null;
} */
el.classList.toggle('paused');
});
/*function slowPause(currPosX) {
el.style.backgroundPosition = currPosX + (i * 0.2) + 'px 0%';
console.log(el.style.backgroundPositionX);
i++;
if (i >= 1000) {
clearInterval(interval);
i = 0;
console.log('cleared');
}
}*/.animated-bg-pos {
height: 100px;
width: 200px;
background-image: linear-gradient(to right, red 25%, blue 25%, blue 50%, orange 50%, orange 75%, green 75%);
background-size: 800px 100%;
animation-name: animate-bg-pos;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 4s;
}
body div.animated-bg-pos.paused {
animation-play-state: paused;
background-position: 200px 0% !important;
}
@keyframes animate-bg-pos {
from {
background-position: 0px 0%;
}
to {
background-position: 800px 0%;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='animated-bg-pos'></div>
<button id='stop'>Stop Animation</button>移除动画将导致元素立即恢复到其原始位置。它不会逐渐过渡回来。你可以阅读一下here。
考虑到这一切，如果您必须获得所需的行为，则必须使用 jQuery 或 JavaScript 重写整个动画。下面的 sn-p 中提供了一个非常粗略的实现，其中包含计时器和 background-position 的不断变化。
/* initial variable declarations */
var el = document.getElementsByTagName('div')[0];
var btn = document.getElementById('stop');
var i = 0,
currPos = 0,
pauseInterval, runningInterval,
running = true,
bgSize = parseInt(window.getComputedStyle(el).backgroundSize.split('px')[0], 10);
/* toggle button listener */
btn.addEventListener('click', function() {
running = !running; // toggle state
if (!running) {
i = 0;
currPos = parseInt(el.style.backgroundPositionX.replace('px', ''), 10);
clearInterval(runningInterval); /* stop the normal animation's timer */
pauseInterval = setInterval(function() {
slowPause(currPos); /* call the slow pause function */
}, 10);
} else {
i = 0;
currPos = parseInt(el.style.backgroundPositionX.replace('px', ''), 10);
clearInterval(pauseInterval); /* for safer side, stop pause animation's timer */
runningInterval = setInterval(function() {
anim(currPos); /* call the normal animation's function */
}, 10);
}
});
/* slowly pause when toggle is clicked */
function slowPause(currPosX) {
el.style.backgroundPosition = (currPosX + (i * .025)) % bgSize + 'px 0%';
i += 10;
if (i >= 1000) { /* end animation after sometime */
clearInterval(pauseInterval);
i = 0;
}
}
/* increment bg position at every interval */
function anim(currPosX) {
el.style.backgroundPosition = (currPosX + (i * .25)) % bgSize + 'px 0%';
i += 10;
}
/* start animation on load */
runningInterval = setInterval(function() {
anim(currPos);
}, 10);.animated-bg-pos {
height: 100px;
width: 200px;
background-image: linear-gradient(to right, red 25%, blue 25%, blue 50%, orange 50%, orange 75%, green 75%);
background-size: 800px 100%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='animated-bg-pos'></div>
<button id='stop'>Toggle Animation State</button>注意：上面的sn-p只是一个粗略的实现，给出一个思路。我不是JS高手，感觉sn-p中使用的JS可以优化很多。
如果您在正在动画的元素周围添加额外的包装元素没有问题，那么您可以使用vals' answer here 中提到的方法。
var el = document.getElementsByTagName('div')[1];
var btn = document.getElementById('stop');
btn.addEventListener('click', function() {
el.classList.toggle('paused');
});.cover {
position: relative;
width: 200px;
height: 100px;
border: 1px solid;
overflow: hidden;
}
.animated-bg-pos {
position: absolute;
top: 0px;
left: 0px;
height: 100px;
width: 240px;
left: -40px;
background-image: linear-gradient(to right, red 25%, blue 25%, blue 50%, orange 50%, orange 75%, green 75%);
background-size: 800px 100%;
animation: animate-bg-pos 4s linear infinite;
transition: transform 1s ease-out;
}
.paused {
animation-play-state: paused;
transform: translateX(40px);
}
@keyframes animate-bg-pos {
from {
background-position: 0px 0%;
}
to {
background-position: 800px 0%;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='cover'>
<div class='animated-bg-pos'></div>
</div>
<button id='stop'>Stop Animation</button>注意：上述方法的所有功劳都归于 vals。我只是调整了他的方法以使这个答案更完整。
【讨论】：
为背景位置创建一个带有 CSS 过渡的类，当单击按钮时，添加该类并同时删除您的动画类。确保在这两种情况下使用相同的单位（像素、百分比...）。
【讨论】：
您可以通过在单击按钮后使用 java 脚本删除和添加新类来实现它。
类似的东西。基本上只需使用 new 创建一个新的 css 类，它设置动画运行的特定时间。
例如，如果您正在运行的动画无限期地运行，则只需创建一个具有相似值但具有确定时间（如 2s 或 4s 等）的 new_class。在这些 4s 之后，动画应该停止。
$(document).click(function (e) {
$el = $(e.target);
if ($el.hasClass('Button_class')) {
$(".moving_image_class").toggleClass('new_class');
} else {
$(".moving_image_class").removeClass('New_class');
}
});
【讨论】：