html - 単一要素の CSS 複数アニメーション、javascript なし

Question

CSS のみを使用し、Javascript を使用せずに画像スライドショーを作成しようとしています。

私はここにほぼ実用的な例を持っています: http://codepen.io/k/pen/Dkhei。問題は、要素の上にカーソルを置くのをやめたときに、「前へ」機能のアニメーションが一時停止しないことです。

クラス名が「imageContainer」の 1 つの要素に 2 つのアニメーションを定義しています。私の構文が間違っているのか、それとも私がやろうとしていることは不可能なのか知りたいです。

HTML:

<div class='carouselContainer'>
<div class='directionSelector previous'>Previous</div>
<div class='directionSelector next'>Next</div>
<div class='imagesContainer'>
  <img class='visible' src='http://ibmsmartercommerce.sourceforge.net/wp-content/uploads/2012/09/Roses_Bunch_Of_Flowers.jpeg'/>
  <img class='hidden' src='http://houseoflowers.com/wp-content/uploads/2013/03/Splendid-flowers-wallpaper-wallpapers-1920x1200-mrwallpaper-com.jpg'/>
  <img class='hidden test' src='http://wallzpoint.com/wp-content/gallery/flower-4/flower-flowers-31723005-1600-1200.jpg'/>
  <img class='hidden' src='http://images2.layoutsparks.com/1/179204/no-idea-t5-flowers.jpg'/>
  <img class='hidden' src='http://3.bp.blogspot.com/-Ca_H0XQYQI4/UQFMSauQxTI/AAAAAAAABik/WHzskd_HqqU/s1600/flowers.jpg'/>
</div>
</div>

CSS:

.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;
  }
}

ご協力ありがとうございました ：）