Попытка приостановить анимацию css путем добавления приостановленного класса
Итак, я видел людей, рекомендующих этот метод как лучший способ приостановить анимацию CSS. Просто добавив или удалив класс, в котором состояние воспроизведения анимации установлено на паузу в элементе или из него. Вот мои попытки:
@keyframes run {
from {
background-position: 0px;
}
to {
background-position: -1536px;
}
}
#animation {
width: 256px;
height: 256px;
position: absolute;
background-image: url('https://i.stack.imgur.com/aH5zB.jpg');
animation: run .5s steps(6) infinite;
}
.paused {
animation-play-state: paused;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
}<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset = "UTF-8">
<link rel='stylesheet' href='style.css'>
</head>
<body>
<div id='animation' class='paused'></div>
</body>
</html>Насколько я понимаю, анимация должна отображаться в браузере приостановленной, но вместо этого она выполняется. Я пробовал добавлять !important после paused, и я попытался сделать класс более конкретным, то есть #animation.paused. Что я делаю неправильно?
Ответы 3
Это потому, что #animation - это селектор идентификаторов, и он более специфичен, чем селектор классов (.paused), поэтому последний не отменяет первый.
Замените .paused на #animation.paused, и он заработает.
function toggleAnimationPlayState() {
document.querySelector('#animation').classList.toggle('paused')
}@keyframes run {
from {
background-position: 0px;
}
to {
background-position: -1536px;
}
}
#animation {
width: 256px;
height: 256px;
position: absolute;
background-image: url('https://i.stack.imgur.com/aH5zB.jpg');
animation: run .5s steps(6) infinite;
}
#animation.paused {
animation-play-state: paused;
}<button onclick = "toggleAnimationPlayState()">Toggle paused class</button>
<div id='animation' class = "paused"></div>Не могли бы вы обновить свой минимальный воспроизводимый пример, чтобы действительно отображать проблему?
Вот и все. Невозможно сделать это более минимальным, чем это. Он полный и поддающийся проверке.
Я обновил свой пример, чтобы использовать background-image. Дай мне знать, если я смогу чем-нибудь помочь.
В исходном коде, который вы опубликовали, на одну строку выше селектора был ;, но он был удален одним из правок. Возможно, в вашем проекте все еще есть неправильная точка с запятой. Обратите внимание, что ;#animation.paused является допустимым селектором нет, и ни то, ни другое не является ;.paused. Однако вам все равно нужно, чтобы селектор приостановленного состояния имел, по крайней мере, ту же специфичность, что и непостоянный, иначе он не будет применяться.
Вау, спасибо! Пробовал сегодня, и он отлично работает. Сначала были проблемы с тем, чтобы заставить его работать, поэтому я провел небольшое исследование по переключению, и это лучшее решение. Извините за вчера, идак, как добавить скрипку на этот сайт (настоящий нуб здесь), и я все еще иногда говорю: P Еще раз спасибо!
Вы можете добиться желаемого эффекта без использования JS. Я бы попробовал следующее:
HTML
<div id = "animation"></div>
CSS
#animation {
width: 256px;
height: 256px;
position: absolute;
background-image: url('spritesheet.png');
animation: run .5s steps(6) infinite;
};
#animation:hover {
animation-play-state: paused;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
}
@keyframes run {
from {background-position: 0px;}
to {background-position: -1536px;}
}
Вы можете сделать это через CSS, что-то вроде :hover или скрипта. Здесь я демонстрирую и то, и другое.
function modifyclass() {
if (document.getElementById("animation").classList.contains('running')) {
document.getElementById("animation").classList.remove('running');
} else {
document.getElementById("animation").classList.add('running');
}
// document.getElementById("animation").classList.toggle('running');
}
var el = document.getElementById("animate");
el.addEventListener("click", modifyclass, false);@keyframes run {
from {
background-position: 0px;
}
to {
background-position: -1536px;
}
}
#animation {
width: 256px;
height: 256px;
background-image: url('https://i.stack.imgur.com/aH5zB.jpg');
animation: run .5s steps(6) infinite;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#animation.paused {
animation-play-state: paused;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
}
#animation.paused:hover,
#animation.running {
animation-play-state: running;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
}
.container {
margin-top: 1em;
}<body>
<div id='animation' class='paused'></div>
<div class = "container">
<button id = "animate" type = "button">Do it</button>
</div>
</body>
Пробовал, написал в вопросе, не вышло :(