如何使用 JavaScript 暂停和恢复 CSS3 动画？

IT技术 javascript animation css resume
2021-01-29 14:00:40

我试图用谷歌搜索并从这个论坛中寻找我的问题的解决方案，但到目前为止还没有运气。我想通过单击图片来暂停我的 CSS3 动画（图像幻灯片放映），并通过单击图片恢复到相同的动画。

我知道如何暂停幻灯片放映，我也能够恢复它一次，但是如果尝试暂停和恢复一次以上，它就会停止工作。这是我的代码的样子：

<!DOCTYPE html>
<html>

<head>
<title></title>
<style type="text/css">
.pic {
    position: absolute;
    opacity: 0;
}

#pic1 {
    -webkit-animation: pic1 4s infinite linear;
}

#pic2 {
    -webkit-animation: pic2 4s infinite linear;
}

@-webkit-keyframes pic1 {
    0%   {opacity: 0;}
    5%   {opacity: 1;}
    45%  {opacity: 1;}
    50%  {opacity: 0;}
    100% {opacity: 0;}
}

@-webkit-keyframes pic2 {
    0%   {opacity: 0;}
    50%  {opacity: 0;}
    55%  {opacity: 1;}
    95%  {opacity: 1;}
    100% {opacity: 0;}
}
</style>

<script type="text/javascript">
function doStuff(){
    var pic1 = document.getElementById("pic1");
    var pic2 = document.getElementById("pic2");

    pic1.style.webkitAnimationPlayState="paused";
    pic2.style.webkitAnimationPlayState="paused";

    pic1.onclick = function(){
        pic1.style.webkitAnimationPlayState="running";
        pic2.style.webkitAnimationPlayState="running";
    }

    pic2.onclick = function(){
        pic1.style.webkitAnimationPlayState="running";
        pic2.style.webkitAnimationPlayState="running";
    }
}
</script>
</head>  

<body>
    <img id="pic1" class="pic" src="photo1.jpg" />
    <img id="pic2" class="pic" src="photo2.jpg" onclick="doStuff()" />
</body>                                                                

</html>

我不想使用任何 JS 库（例如 jQuery）或任何其他外部解决方案。

我的猜测是我的函数内部的doStuff函数仍在运行，这就是为什么pause并且resume只工作一次。

单击一次后，有没有办法清除这些功能？还是我试图以完全错误的方式做到这一点？帮助表示赞赏。:)

5个回答

我发现使用 css 类更容易做到这一点。有了它，您可以为每个浏览器使用前缀。

.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

然后你只需要在你的动画元素中添加或删除这个类，你就可以暂停/恢复动画。

这似乎是更好的解决方案，但我无法让它工作。它是否需要动画infinite？
2021-03-17 14:00:40
@nq1 CSS 是正确的做法。使用 JavaScript 添加类。与接受的答案不同，此答案也是跨浏览器兼容的。
2021-03-20 14:00:40
这是一个更好的解决方案，应该是公认的答案，更简洁。
2021-04-01 14:00:40
旧的，我知道但@Nate 和其他任何人。添加!important到每一行。CSS遵循特殊性，规则越具体，其属性就越突出。animation-play-state: paused !important;修复了这个“问题”（这是 css 的设计方式，但这里是一个问题）。这可能对 Luis 有效，因为他做了一个简单的测试，或者没有特异性“冲突”。
2021-04-02 14:00:40
感谢您的回答 Luis Hijarrubia，但我正在寻找一种使用 JS 的方法。这可能对其他情况更好，但对我来说不是。
2021-04-10 14:00:40

这是使用javascript的解决方案：

var imgs = document.querySelectorAll('.pic');

for (var i = 0; i < imgs.length; i++) {
  imgs[i].onclick = toggleAnimation;
  imgs[i].style.webkitAnimationPlayState = 'running';
}

function toggleAnimation() {
  var style;
  for (var i = 0; i < imgs.length; i++) {
    style = imgs[i].style;
    if (style.webkitAnimationPlayState === 'running') {
      style.webkitAnimationPlayState = 'paused';
      document.body.className = 'paused';
    } else {
      style.webkitAnimationPlayState = 'running';
      document.body.className = '';
    }
  }
}
.pic {
  position: absolute;
  opacity: 0;
}

#pic1 {
  -webkit-animation: pic1 4s infinite linear;
}

#pic2 {
  -webkit-animation: pic2 4s infinite linear;
}

@-webkit-keyframes pic1 {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes pic2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  55% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.paused {
  background-color: #ddd;
}
<img id="pic1" class="pic" src="http://placehold.it/200x200/ff0000/ffffff">
<img id="pic2" class="pic" src="http://placehold.it/200x200/ff00ff/ffffff">

jQuery 解决方案（更短、更易读）：

var imgs = $('.pic'),
  playState = '-webkit-animation-play-state';

imgs.click(function() {
  imgs.css(playState, function(i, v) {
    return v === 'paused' ? 'running' : 'paused';
  });
  $('body').toggleClass('paused', $(this).css(playState) === 'paused');
});
.pic {
  position: absolute;
  opacity: 0;
}

#pic1 {
  -webkit-animation: pic1 4s infinite linear;
}

#pic2 {
  -webkit-animation: pic2 4s infinite linear;
}

@-webkit-keyframes pic1 {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes pic2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  55% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.paused {
  background-color: #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="pic1" class="pic" src="http://placehold.it/200x200/ff0000/ffffff">
<img id="pic2" class="pic" src="http://placehold.it/200x200/ff00ff/ffffff">

请问是否可以检测暂停时剩余的时间？谢谢
2021-03-13 14:00:40

这是扩展 Luis Hijarrubia 给出的答案

.pause {
   -webkit-animation-play-state: paused !important; 
   -moz-animation-play-state: paused !important; 
   -o-animation-play-state: paused !important;
    animation-play-state: paused !important;
}

在我的页面中，我正在从父元素触发类的更改。我想要做的就是旋转里面的图像。但似乎因为我没有使用悬停，所以暂停类的添加对动画状态没有影响。

!important 的使用确保这些值被新添加的 CSS 值覆盖。

澄清一下，这是因为 css 的特殊性。将属性直接添加到元素的脚本（如 Sime 的回答）不会有这个问题，因为默认情况下“内联”样式会覆盖样式表中的规则。developer.mozilla.org/en-US/docs/Web/CSS/Specificity
2021-03-14 14:00:40
这是由您的 HTML 和 CSS 引起的特定问题。充其量这应该是评论，它不回答实际问题。
2021-03-15 14:00:40
如果没有发布，就来这里发布这个答案。就我而言，我需要暂停几个同步动画，发现这是最简单的方法。它还允许您添加.pause:hover适合需要的效果。
2021-03-25 14:00:40 
var e = document.getElementsById("Your_Id");


e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);


function listener(e) {  alert("Your POSITION parameter:" + .target.style.position);
  switch(e.type) {
    case "animationstart":
      d = "Started: elapsed time is " + e.elapsedTime;
      break;
    case "animationend":
      d = "Ended: elapsed time is " + e.elapsedTime;
      break;
    case "animationiteration":
      d= "New loop started at time " + e.elapsedTime;  alert("pausing for 1 seconddddddd!!!!!!!"); e.target.style.animationPlayState = "paused";        window.setTimeout(function(){e.target.style.animationPlayState = "running";}, 1000);
      break;
  }
}

我还没有测试过，但也许是这样的？

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.pic {   position: absolute;opacity: 0;  }
.pic1 {  -webkit-animation: pic1 4s infinite linear;   }
.pic2 {  -webkit-animation: pic2 4s infinite linear;   }
@-webkit-keyframes pic1 {  0%   {opacity: 0;}
                           5%   {opacity: 1;}
                           45%  {opacity: 1;}
                           50%  {opacity: 0;}
                           100% {opacity: 0;}    }
@-webkit-keyframes pic2 {  0%   {opacity: 0;}
                           50%  {opacity: 0;}
                           55%  {opacity: 1;}
                           95%  {opacity: 1;}
                           100% {opacity: 0;}    }
</style>
<script type="text/javascript">
function doStuff(){
    var pic1 = document.getElementById("pic1");
    var pic2 = document.getElementById("pic2");

    pic1.className="pic paused";
    pic2.className="pic paused";

    pic1.onclick = function(){
       pic1.className="pic pic1";
       pic2.className="pic pic2";
    }
    pic2.onclick = function(){
       pic1.className="pic pic1";
       pic2.className="pic pic2";
    }
}
</script>
</head>  
<body>
    <img id="pic1" class="pic pic1" src="photo1.jpg" />
    <img id="pic2" class="pic pic2" src="photo2.jpg" onclick="doStuff()" />
</body>                                                                 
</html>
其它你可能感兴趣的问题
上一篇如何在 HTML/JavaScript 中显示存储为字节数组的图像？ 下一篇将 JSON 数据从 Javascript 发送到 PHP？