CSS複数のアニメーションを単一の要素に、JavaScriptなし

Question

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

私はここでALMOST作業例を持っている： http://codepen.io/k/pen/Dkhei。 問題は、「前の」機能のアニメーションが、その要素の上にホバリングするのをやめたときに一時停止しないということです。

は、私は、そのクラス名「imageContainer」である単一の要素、上の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; 
    } 
} 

はあなたの助けをありがとう:)

Answer 1

をW3Cあたりanimation-nameプロパティとしてLink

複数のアニメーションがattemptiある場合同じプロパティを変更すると、名前のリストの最後に最も近いアニメーションが勝ちます。

showImagesPrevが最初に参照され、showImagesNextが最後に参照されたため、W3Cごとに正しく機能しました。これらの2つの参照を交換すると、Previousは正常に動作し、Nextボタンは問題を再現します。作業Example