使用js播放/暂停CSS3动画

Question

我需要在我的网站上有一个动画，是能够暂停和继续。我已经尝试了几个小时来让它工作，最终只暂停了其中一个需要暂停的图像。我想不出如何暂停所有的图像，有人能帮我吗？

​

// 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>

​

Answer 1

如果你想让.animated类的所有动画停止运行，你可以这样做：

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

然后执行以下操作：

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

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

我不知道这是否有效，因为如果没有图像，很难看到动画是否正常工作。