CSS più animazioni sul singolo elemento, javascript

Question

Sto cercando di creare una presentazione di un'immagine utilizzando solo i CSS e javascript.

Ho un esempio QUASI lavorare qui: http://codepen.io/k/pen/Dkhei. Il problema è che l'animazione per la funzionalità 'Precedente' non si interrompe quando smetto di passare con il puntatore del mouse sul suo elemento.

Annunciare la mia definizione di due animazioni su un singolo elemento, il cui nome di classe è 'imageContainer'. Sono curioso di sapere se la mia sintassi è sbagliata o se ciò che sto cercando di fare non è possibile.

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

Grazie per il vostro aiuto :)

Answer 1

Come da W3C animation-name proprietà Link

Se più animazioni sono attempti Per modificare la stessa proprietà, vince l'animazione più vicina alla fine dell'elenco dei nomi.

Nel tuo esempio showImagesPrev si riferisce in primo showImagesNext era l'ultima, quindi ha funzionato correttamente come da W3C. Se si interscambiano questi due riferimenti, Previous funzionerà correttamente, mentre il pulsante Next riproduce il problema. Un lavoro Example