CSS3动画播放/暂停与js答案

【问题标题】：CSS3 Animation play/pause with jsCSS3动画播放/暂停与js
【发布时间】：2015-05-05 01:02:46
【问题描述】：

我需要在我的网站上制作能够暂停和继续播放的动画。我已经尝试了一个小时来完成这项工作，最后终于在某个地方暂停了其中一个需要暂停的图像。我不知道如何暂停所有图像，谁能帮帮我？

// JavaScript Document
var play = document.getElementById("play");
var pause = document.getElementById("pause");
var animated = document.getElementsByClassName("animated");
play.addEventListener('click', playAnimation);
pause.addEventListener('click', pauseAnimation);

function playAnimation() {
  for (var i = 0; i < animated.length; i += 1) {
    animated[i].style.WebkitAnimationPlayState = "running";
    animated[i].style.animationPlayState = "running";
  }
}

function pauseAnimation() {
  for (var i = 0; i < animated.length; i += 1) {
    animated[i].style.WebkitAnimationPlayState = "paused";
    animated[i].style.animationPlayState = "paused";
  }
}

@charset "utf-8";

/* CSS Document */

body {
  margin: 0;
}
.wrapper {
  width: 100%;
  margin: 0 auto;
}
main {
  display: block;
  background-color: #fff;
}
.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}
header {
  height: 75px;
  background: #ebebeb url(img/taylor%20logo.png) no-repeat center;
  background-size: 150px 47.75px;
}
section.module.parallax {
  height: 600px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
section.module.parallax-1 {
  background-image: url(img/tay1.png);
}
section.module.parallax-2 {
  background-image: url(img/taylor-swift-009.jpg);
}
section.module.parallax-3 {
  background-image: url(img/Taylor-Swift.jpg);
}
section.module.content {
  padding: 40px 0;
  background: #fff0fb;
}
section.module p {
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: 300;
  color: #7a7a7a;
}
footer {
  padding: 20px 5px;
  background: #EBEBEB;
  color: #514f4f;
}
footer nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
}
footer nav li {
  display: inline-block;
}
footer nav a {
  display: block;
  margin: 0 5px;
  color: #fff;
}
.social:hover {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
.social {
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}
/*****ANIMATION*****/

#animation {
  height: 450px;
  width: 1000px;
  background: url(img/scene.png) fixed no-repeat center;
}
#animation:hover {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
.flash {
  position: relative;
  height: 50px;
  width: 50px;
  margin: 0 auto;
  background: url(img/spritesheet.png) no-repeat left center;
}
@keyframes play {
  100% {
    background-position: -100px;
  }
}
@-webkit-keyframes play {
  100% {
    background-position: -100px;
  }
}
.flash-1 {
  animation: play .5s steps(2) infinite;
  -webkit-animation: play .5s steps(2) infinite;
  top: 50px;
  left: 400px;
}
.flash-2 {
  left: 100px;
  animation: play .5s steps(2) infinite;
  animation-delay: .2s;
  -webkit-animation: play .5s steps(2) infinite;
  -webkit-animation-delay: .2s;
}
.flash-3 {
  left: 350px;
  animation: play .5s steps(2) infinite;
  animation-delay: .3s;
  -webkit-animation: play .5s steps(2) infinite;
  -webkit-animation-delay: .3s;
}
.flash-4 {
  left: 70px;
  bottom: 80px;
  animation: play .5s steps(2) infinite;
  animation-delay: 1s;
  -webkit-animation: play .5s steps(2) infinite;
  -webkit-animation-delay: 1s;
}
.flash-5 {
  left: 375px;
  bottom: 70px;
  animation: play .5s steps(2) infinite;
  animation-delay: .2s;
  -webkit-animation: play .5s steps(2) infinite;
  -webkit-animation-delay: .2s;
}
.flash-6 {
  bottom: 100px;
  animation: play .5s steps(2) infinite;
  animation-delay: .2s;
  -webkit-animation: play .5s steps(2) infinite;
  -webkit-animation-delay: .2s;
}
.flash-7 {
  bottom: 290px;
  left: 170px;
  animation: play .5s steps(2) infinite;
  animation-delay: .4s;
  -webkit-animation: play .5s steps(2) infinite;
  -webkit-animation-delay: .4s;
}
.flash-8 {
  bottom: 150px;
  left: 200px;
  animation: play .5s steps(2) infinite;
  animation-delay: .3s;
  -webkit-animation: play .5s steps(2) infinite;
  -webkit-animation-delay: .3s;
}
.flash-9 {
  bottom: 370px;
  left: 450px;
  animation: play .5s steps(2) infinite;
  animation-delay: .7s;
  -webkit-animation: play .5s steps(2) infinite;
  -webkit-animation-delay: .7s;
}
.flash-10 {
  bottom: 300px;
  left: 100px;
  animation: play .5s steps(2) infinite;
  animation-delay: .9s;
  -webkit-animation: play .5s steps(2) infinite;
  -webkit-animation-delay: .9s;
}
.speech img {
  position: absolute;
  left: 0;
  animation-name: speechFadeInOut;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-direction: alternate;
  -webkit-animation-name: speechFadeInOut;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 1s;
  -webkit-animation-direction: alternate;
  -webkit-transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
  transition: opacity 1s linear;
}
.speech {
  position: relative;
  height: 100px;
  width: 100px;
}
.speech-1 {
  bottom: 750px;
  left: 420px;
}
.speech-2 {
  bottom: 900px;
  left: 900px;
}
@keyframes speechFadeInOut {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 0.2;
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes speechFadeInOut {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 0.2;
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes speechFadeInOut {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 0.2;
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
#taylorCartoon {
  position: relative;
  bottom: 380px;
  left: 820px;
  animation-name: taylorWalk;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-duration: 10s;
  animation-direction: alternate;
  animation-delay: 2s;
  -webkit-animation-name: taylorWalk;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-duration: 10s;
  -webkit-animation-direction: alternate;
  -webkit-animation-delay: 2s;
}
@keyframes taylorWalk {
  from {
    left: 820px;
  }
  to {
    left: 420px;
    opacity: 0%;
  }
}
@-webkit-keyframes taylorWalk {
  from {
    left: 820px;
  }
  to {
    left: 420px;
    opacity: 0%;
  }
}
@-moz-keyframes taylorWalk {
  from {
    left: 820px;
  }
  to {
    left: 420px;
    opacity: 0%;
  }
}
.control {
  height: 60px;
  width: 60px;
  border: 0;
  padding: 5px;
  display: inline-block;
}
.playHolder {
  background: url(img/play.png) no-repeat;
  background-size: 100%;
  margin-left: 100px;
}
.pauseHolder {
  background: url(img/pause.png) no-repeat;
  background-size: 100%;
  margin-left: 100px;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link href="style.css" media="all" rel="stylesheet">
  <script src="modernizr.js"></script>
  <title>Taylor Swift</title>
</head>

<body>
  <div class="wrapper">
    <div>
      <header>
      </header>
    </div>
    <main>
      <section class="module parallax parallax-1">
        <div class="container">
        </div>
      </section>
      <section class="module content">
        <div class="container">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil consequuntur, nesciunt dicta, esse rem ducimus itaque quis. Adipisci ullam nam qui illum debitis sit ad in delectus, repudiandae non dolorum! Lorem ipsum dolor sit amet, consectetur
            adipisicing elit. Suscipit veritatis, facere aliquid itaque tempore consequatur nihil sint enim aliquam id saepe magnam totam repellat placeat a fugit nulla molestias voluptas.</p>
        </div>
      </section>
      <section class="module parallax parallax-2">
        <div class="container">
        </div>
      </section>
      <section class="module content">
        <div class="container">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil consequuntur, nesciunt dicta, esse rem ducimus itaque quis. Adipisci ullam nam qui illum debitis sit ad in delectus, repudiandae non dolorum! Lorem ipsum dolor sit amet, consectetur
            adipisicing elit. Suscipit veritatis, facere aliquid itaque tempore consequatur nihil sint enim aliquam id saepe magnam totam repellat placeat a fugit nulla molestias voluptas.</p>
        </div>
      </section>
      <section class="module parallax parallax-3">
        <div class="container">
        </div>
      </section>
      <section class="module content">
        <div class="container">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil consequuntur, nesciunt dicta, esse rem ducimus itaque quis. Adipisci ullam nam qui illum debitis sit ad in delectus, repudiandae non dolorum! Lorem ipsum dolor sit amet, consectetur
            adipisicing elit. Suscipit veritatis, facere aliquid itaque tempore consequatur nihil sint enim aliquam id saepe magnam totam repellat placeat a fugit nulla molestias voluptas.</p>
        </div>
      </section>
      MUSIC VIDEO
      <section class="module content">
        <div class="container">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil consequuntur, nesciunt dicta, esse rem ducimus itaque quis. Adipisci ullam nam qui illum debitis sit ad in delectus, repudiandae non dolorum! Lorem ipsum dolor sit amet, consectetur
            adipisicing elit. Suscipit veritatis, facere aliquid itaque tempore consequatur nihil sint enim aliquam id saepe magnam totam repellat placeat a fugit nulla molestias voluptas.</p>
        </div>
      </section>
      <div id="animation" class="animated">
        <div class="flash flash-1" class="animated">
        </div>
        <div class="flash flash-2" class="animated">
        </div>
        <div class="flash flash-3" class="animated">
        </div>
        <div class="flash flash-4" class="animated">
        </div>
        <div class="flash flash-5" class="animated">
        </div>
        <div class="flash flash-6" class="animated">
        </div>
        <div class="flash flash-7" class="animated">
        </div>
        <div class="flash flash-8" class="animated">
        </div>
        <div class="flash flash-9" class="animated">
        </div>
        <div class="flash flash-10" class="animated">
        </div>
        <div id="taylorCartoon" class="animated">
          <img src="img/taylor cartoon .png" width="181" height="300" />
        </div>
        <div class="speech speech-1" class="animated">
          <img src="img/SPEECH1.png" width="100" height="99" />
        </div>
        <div class="speech speech-2" class="animated">
          <img src="img/speech2.png" width="100" height="99" />
        </div>
      </div>
      <div>
        <button type="button" class="button" id="play">Play</button>
        <button type="button" class="button" id="pause">Pause</button>
      </div>
    </main>
    <footer>
      <div class="copyright">
        <small>
              &copy; Lana Yaffe 2015 | Taylor Swift
            </small>
      </div>
      <nav>
        <ul>
          <li class="social">
            <a href="http://http://taylorswift.tumblr.com/">
              <img src="img/Tumblr.png" />
            </a>
          </li>
          <li class="social">
            <a href="http://twitter.com/taylorswift13">
              <img src="img/Twitter.png" />
            </a>
          </li>
          <li class="social">
            <a href="https://www.facebook.com/TaylorSwift">
              <img src="img/Facebook.png" />
            </a>
          </li>
          <li class="social">
            <a href="https://instagram.com/taylorswift/">
              <img src="img/Instagram.png" />
            </a>
          </li>
        </ul>
      </nav>
    </footer>
  </div>
  <script src="js.js"></script>
</body>

</html>

【问题讨论】：

由于我们缺少样式表，你能做一个 jsFiddle 吗？ jsfiddle.net
我添加了样式，但在这里jsfiddle.net/y6mgpzke
它对我来说很好用（即使没有 user86745458 的修复）。我看到一个框移到一边（图像未加载），如果我按下暂停，它就会停止移动。
这就是我的意思，我似乎无法找到问题所在，似乎只是保罗在屏幕上为我移动的女人，但也需要闪光和泡泡停止

标签： javascript html css animation

【解决方案1】：

如果您希望 .animated 类的所有动画停止运行，您可以执行以下操作：

body.pause .animated {
    animation-play-state: paused;
}

然后做：

function pause_all() {
    document.body.className = "pause";
}

function play_all() {
    document.body.className = "";
}

我不知道这是否有效，因为没有图像很难看出动画是否正确。

【讨论】：

对不起，我把它放在哪里工作了很长时间累了哈哈