CSS Nhiều Ảnh động trên một phần tử, không có javascript

Question

Tôi đang cố gắng tạo trình chiếu hình ảnh chỉ bằng CSS và không có Javascript.

Tôi có ví dụ hoạt động ALMOST ở đây: http://codepen.io/k/pen/Dkhei. Vấn đề là hoạt ảnh cho chức năng 'Trước' sẽ không tạm dừng khi tôi ngừng di chuột qua phần tử của nó.

Tôi định nghĩa hai hoạt ảnh trên một phần tử duy nhất, có tên lớp là 'imageContainer'. Tôi tò mò muốn biết liệu cú pháp của tôi là sai hay nếu điều tôi đang cố gắng làm là không thể.

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

Cảm ơn bạn đã giúp đỡ của bạn :)

Answer 1

Theo W3C animation-name tài sản Link

Nếu nhiều animations đang attempti ng để sửa đổi cùng một thuộc tính, thì hoạt ảnh gần nhất với phần cuối của danh sách các tên thắng.

Trong ví dụ showImagesPrev được gọi trước và showImagesNext là ảnh cuối cùng, vì vậy nó hoạt động chính xác theo W3C. Nếu bạn trao đổi hai tham chiếu này, Previous sẽ hoạt động tốt, trong khi nút Next tạo lại sự cố. Một hoạt động Example