title: Pause background slide animation on menu click
body: <p>I downloaded a simple website template, and I am creating a very basic website with it.  I then downloaded a script for background slide animation using ".cb-slideshow".  Everything works and looks pretty good, but I'd like the background animation to pause where it is when a menu item from the nav menu is clicked.  Forgive my lacking the correct nomenclature, but upon menu item click, a black box opens up with content (mainly text).  I'd just like the background animation to stop when I click on a menu item, then restart from where it was when I close the content window.  The background animation is a series of 6 images that fade in and out, with a text phrase that flies in and out with each one.  There is a static navigation menu on the left side with 3 clickable content links; each one causes a sub-window to pop up with content.  I'd like to have the action of clicking a nav link cause the background slideshow to pause, and then have the slideshow restart when the content sub-window is closed.</p>
  
  <p>Here is the css stylesheet:</p>
  
  <pre><code>.cb-slideshow,
  .cb-slideshow:after {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
      z-index: 0;
  }
  .cb-slideshow:after {
      content: '';
      background: transparent url(../images/pattern.png) repeat top left;
  }
  .cb-slideshow li span {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      color: transparent;
      background-size: cover;
      background-position: 50% 50%;
      background-repeat: none;
      opacity: 0;
      z-index: 0;
      -webkit-backface-visibility: hidden;
      -webkit-animation: imageAnimation 36s linear infinite 0s;
      -moz-animation: imageAnimation 36s linear infinite 0s;
      -o-animation: imageAnimation 36s linear infinite 0s;
      -ms-animation: imageAnimation 36s linear infinite 0s;
      animation: imageAnimation 36s linear infinite 0s;
  }
  .cb-slideshow li div {
      z-index: 1000;
      position: absolute;
      bottom: 115px;
      left: 0px;
      width: 100%;
      text-align: right;
      opacity: 0;
      -webkit-animation: titleAnimation 36s linear infinite 0s;
      -moz-animation: titleAnimation 36s linear infinite 0s;
      -o-animation: titleAnimation 36s linear infinite 0s;
      -ms-animation: titleAnimation 36s linear infinite 0s;
      animation: titleAnimation 36s linear infinite 0s;
  }
  .cb-slideshow li div h3 {
      font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
      font-size: 120px;
      padding: 0 30px;
      line-height: 120px;
      color: rgba(169,3,41, 0.8);
  }
  .cb-slideshow li:nth-child(1) span { background-image: url(../images/1.jpg) }
  .cb-slideshow li:nth-child(2) span {
      background-image: url(../images/2.jpg);
      -webkit-animation-delay: 6s;
      -moz-animation-delay: 6s;
      -o-animation-delay: 6s;
      -ms-animation-delay: 6s;
      animation-delay: 6s;
  }
  .cb-slideshow li:nth-child(3) span {
      background-image: url(../images/3.jpg);
      -webkit-animation-delay: 12s;
      -moz-animation-delay: 12s;
      -o-animation-delay: 12s;
      -ms-animation-delay: 12s;
      animation-delay: 12s;
  }
  .cb-slideshow li:nth-child(4) span {
      background-image: url(../images/4.jpg);
      -webkit-animation-delay: 18s;
      -moz-animation-delay: 18s;
      -o-animation-delay: 18s;
      -ms-animation-delay: 18s;
      animation-delay: 18s;
  }
  .cb-slideshow li:nth-child(5) span {
      background-image: url(../images/5.jpg);
      -webkit-animation-delay: 24s;
      -moz-animation-delay: 24s;
      -o-animation-delay: 24s;
      -ms-animation-delay: 24s;
      animation-delay: 24s;
  }
  .cb-slideshow li:nth-child(6) span {
      background-image: url(../images/6.jpg);
      -webkit-animation-delay: 30s;
      -moz-animation-delay: 30s;
      -o-animation-delay: 30s;
      -ms-animation-delay: 30s;
      animation-delay: 30s;
  }
  .cb-slideshow li:nth-child(2) div {
      -webkit-animation-delay: 6s;
      -moz-animation-delay: 6s;
      -o-animation-delay: 6s;
      -ms-animation-delay: 6s;
      animation-delay: 6s;
  }
  .cb-slideshow li:nth-child(3) div {
      -webkit-animation-delay: 12s;
      -moz-animation-delay: 12s;
      -o-animation-delay: 12s;
      -ms-animation-delay: 12s;
      animation-delay: 12s;
  }
  .cb-slideshow li:nth-child(4) div {
      -webkit-animation-delay: 18s;
      -moz-animation-delay: 18s;
      -o-animation-delay: 18s;
      -ms-animation-delay: 18s;
      animation-delay: 18s;
  }
  .cb-slideshow li:nth-child(5) div {
      -webkit-animation-delay: 24s;
      -moz-animation-delay: 24s;
      -o-animation-delay: 24s;
      -ms-animation-delay: 24s;
      animation-delay: 24s;
  }
  .cb-slideshow li:nth-child(6) div {
      -webkit-animation-delay: 30s;
      -moz-animation-delay: 30s;
      -o-animation-delay: 30s;
      -ms-animation-delay: 30s;
      animation-delay: 30s;
  }
  @-webkit-keyframes imageAnimation { 
      0% { opacity: 0;
      -webkit-animation-timing-function: ease-in; }
      8% { opacity: 1;
           -webkit-animation-timing-function: ease-out; }
      17% { opacity: 1 }
      25% { opacity: 0 }
      100% { opacity: 0 }
  }
  @-moz-keyframes imageAnimation { 
      0% { opacity: 0;
      -moz-animation-timing-function: ease-in; }
      8% { opacity: 1;
           -moz-animation-timing-function: ease-out; }
      17% { opacity: 1 }
      25% { opacity: 0 }
      100% { opacity: 0 }
  }
  @-o-keyframes imageAnimation { 
      0% { opacity: 0;
      -o-animation-timing-function: ease-in; }
      8% { opacity: 1;
           -o-animation-timing-function: ease-out; }
      17% { opacity: 1 }
      25% { opacity: 0 }
      100% { opacity: 0 }
  }
  @-ms-keyframes imageAnimation { 
      0% { opacity: 0;
      -ms-animation-timing-function: ease-in; }
      8% { opacity: 1;
           -ms-animation-timing-function: ease-out; }
      17% { opacity: 1 }
      25% { opacity: 0 }
      100% { opacity: 0 }
  }
  @keyframes imageAnimation { 
      0% { opacity: 0;
      animation-timing-function: ease-in; }
      8% { opacity: 1;
           animation-timing-function: ease-out; }
      17% { opacity: 1 }
      25% { opacity: 0 }
      100% { opacity: 0 }
  }
  @-webkit-keyframes titleAnimation { 
      0% {
          opacity: 0;
          -webkit-transform: translateX(200px);
      }
      8% {
          opacity: 1;
          -webkit-transform: translateX(0px);
      }
      17% {
          opacity: 1;
          -webkit-transform: translateX(0px);
      }
      19% {
          opacity: 0;
          -webkit-transform: translateX(-400px);
      }
      25% { opacity: 0 }
      100% { opacity: 0 }
  }
  @-moz-keyframes titleAnimation { 
      0% {
          opacity: 0;
          -moz-transform: translateX(200px);
      }
      8% {
          opacity: 1;
          -moz-transform: translateX(0px);
      }
      17% {
          opacity: 1;
          -moz-transform: translateX(0px);
      }
      19% {
          opacity: 0;
          -moz-transform: translateX(-400px);
      }
      25% { opacity: 0 }
      100% { opacity: 0 }
  }
  @-o-keyframes titleAnimation { 
      0% {
          opacity: 0;
          -o-transform: translateX(200px);
      }
      8% {
          opacity: 1;
          -o-transform: translateX(0px);
      }
      17% {
          opacity: 1;
          -o-transform: translateX(0px);
      }
      19% {
          opacity: 0;
          -o-transform: translateX(-400px);
      }
      25% { opacity: 0 }
      100% { opacity: 0 }
  }
  @-ms-keyframes titleAnimation { 
      0% {
          opacity: 0;
          -ms-transform: translateX(200px);
      }
      8% {
          opacity: 1;
          -ms-transform: translateX(0px);
      }
      17% {
          opacity: 1;
          -ms-transform: translateX(0px);
      }
      19% {
          opacity: 0;
          -ms-transform: translateX(-400px);
      }
      25% { opacity: 0 }
      100% { opacity: 0 }
  }
  @keyframes titleAnimation { 
      0% {
          opacity: 0;
          transform: translateX(200px);
      }
      8% {
          opacity: 1;
          transform: translateX(0px);
      }
      17% {
          opacity: 1;
          transform: translateX(0px);
      }
      19% {
          opacity: 0;
          transform: translateX(-400px);
      }
      25% { opacity: 0 }
      100% { opacity: 0 }
  }
  /* Show at least something when animations not supported */
  .no-cssanimations .cb-slideshow li span{
      opacity: 1;
  }
  @media screen and (max-width: 1140px) { 
      .cb-slideshow li div h3 { font-size: 100px }
  }
  @media screen and (max-width: 600px) { 
      .cb-slideshow li div h3 { font-size: 50px }
  }
  </code></pre>
  
  <p>And here is where it's referenced in the html:</p>
  
  <pre><code>&lt;/head&gt;
      &lt;body id="page1"&gt;
       &lt;ul class="cb-slideshow"&gt;
              &lt;li&gt;&lt;span&gt;Image 01&lt;/span&gt;&lt;div&gt;&lt;h3&gt;phrase 1&lt;/h3&gt;&lt;/div&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span&gt;Image 02&lt;/span&gt;&lt;div&gt;&lt;h3&gt;phrase 2&lt;/h3&gt;&lt;/div&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span&gt;Image 03&lt;/span&gt;&lt;div&gt;&lt;h3&gt;phrase 3&lt;/h3&gt;&lt;/div&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span&gt;Image 04&lt;/span&gt;&lt;div&gt;&lt;h3&gt;phrase 4&lt;/h3&gt;&lt;/div&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span&gt;Image 05&lt;/span&gt;&lt;div&gt;&lt;h3&gt;phrase 5&lt;/h3&gt;&lt;/div&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span&gt;Image 06&lt;/span&gt;&lt;div&gt;&lt;h3&gt;phrase 6&lt;/h3&gt;&lt;/div&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class="spinner"&gt;&lt;/div&gt;
          &lt;div class="extra"&gt;
              &lt;div class="main"&gt;
                  &lt;div class="box"&gt;
  </code></pre>