title: CSS Multiple Animations on single element, no javascript
body: <p>I am trying to create an image slideshow using only CSS and no Javascript.</p>
  
  <p>I have an ALMOST working example here: <a href="http://codepen.io/k/pen/Dkhei" rel="noreferrer">http://codepen.io/k/pen/Dkhei</a> .
  The problem is that the animation for the 'Previous' functionality won't pause when I stop hovering over its element. </p>
  
  <p>I am defining two animations on a single element, whose class name is 'imageContainer'. I am curious to know whether my syntax is wrong or if what I am trying to do is not possible. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class='carouselContainer'&gt;
  &lt;div class='directionSelector previous'&gt;Previous&lt;/div&gt;
  &lt;div class='directionSelector next'&gt;Next&lt;/div&gt;
  &lt;div class='imagesContainer'&gt;
    &lt;img class='visible' src='http://ibmsmartercommerce.sourceforge.net/wp-content/uploads/2012/09/Roses_Bunch_Of_Flowers.jpeg'/&gt;
    &lt;img class='hidden' src='http://houseoflowers.com/wp-content/uploads/2013/03/Splendid-flowers-wallpaper-wallpapers-1920x1200-mrwallpaper-com.jpg'/&gt;
    &lt;img class='hidden test' src='http://wallzpoint.com/wp-content/gallery/flower-4/flower-flowers-31723005-1600-1200.jpg'/&gt;
    &lt;img class='hidden' src='http://images2.layoutsparks.com/1/179204/no-idea-t5-flowers.jpg'/&gt;
    &lt;img class='hidden' src='http://3.bp.blogspot.com/-Ca_H0XQYQI4/UQFMSauQxTI/AAAAAAAABik/WHzskd_HqqU/s1600/flowers.jpg'/&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.carouselContainer{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid grey;
    width: 450px;
    height: 300px; 
    position: relative;
    background-color: grey;
    margin: auto;
    overflow: hidden;
  }
  
  .directionSelector{
    width: 60px;
    height: 1.5em;
    line-height: 1.5em;
    top: 150px !important;
    position: absolute;
    cursor: pointer;
    background-color: rgba(1,1,1,.7);
    color: white;
    text-align: center;
    border-radius: 5px;
  }
  .previous{
    top: 0;
    left: 5px;
  }
  .next{
    top: 0;
    right: 5px;
  }
  img{
    width: 100%;
    height: 300px;
    float: left;
  }
  .imagesContainer{
    width: 100%;
    background-color: yellow;
    -webkit-animation-name: showImagesPrev,showImagesNext;
    -webkit-animation-duration: 5s,5s;
    -webkit-animation-play-state: paused,paused;
    -webkit-animation-fill-mode: forwards,forwards;
  
    -moz-animation-name: showImagesPrev,showImagesNext;
    -moz-animation-duration: 5s,5s;
    -moz-animation-play-state: paused,paused;
    -moz-animation-fill-mode: forwards,backwards;
  
    animation-name: showImagesPrev,showImagesNext;
    animation-duration: 5s,5s;
    animation-play-state: paused,paused;
    animation-fill-mode: forwards,backwards;
  
  }
  .previous:hover ~ div.imagesContainer{
    -webkit-animation-name: showImagesPrev;
    -webkit-animation-play-state: running; 
  
    -moz-animation-name: showImagesPrev;
    -moz-animation-play-state: running; 
  
    animation-name: showImagesPrev;
    animation-play-state: running; 
  }
  .next:hover ~ div.imagesContainer{
    -webkit-animation-name: showImagesNext;
    -webkit-animation-play-state: running;
  
    -moz-animation-name: showImagesNext;
    -moz-animation-play-state: running;
  
    animation-name: showImagesNext;
    animation-play-state: running;
  }
  @-webkit-keyframes showImagesPrev{
    from{
      margin-top: 0px;
    }
    to{
      margin-top: -1200px;
    }
  }
  @-moz-keyframes showImagesPrev{
    from{
      margin-top: 0px;
    }
    to{
      margin-top: -1200px;
    }
  }
  @keyframes showImagesPrev{
    from{
      margin-top: 0px;
    }
    to{
      margin-top: -1200px;
    }
  }
  @-webkit-keyframes showImagesNext{
    from{
      margin-top: -1200px;
    }
    to{
      margin-top: 0px;
    }
  }
  @-moz-keyframes showImagesNext{
    from{
      margin-top: -1200px;
    }
    to{
      margin-top: 0px;
    }
  }
  @keyframes showImagesNext{
    from{
      margin-top: -1200px;
    }
    to{
      margin-top: 0px;
    }
  }
  </code></pre>
  
  <p>Thank you for your help :)</p>