CSS Multiple Animations on single element, no javascript
animation, css, css-animations, html
Solution
As per W3C `animation-name` property Link
If multiple animations are attempting to modify the same property, then the animation closest to the end of the list of names wins.
In your example `showImagesPrev` is referred first and `showImagesNext` was the last one, so it worked correctly as per W3C. If you interchange these two reference, `Previous` will work fine, while `Next` button reproduce the issue. A working Example
Problem
I am trying to create an image slideshow using only CSS and no Javascript. I have an ALMOST working example here: http://codepen.io/k/pen/Dkhei . The problem is that the animation for the 'Previous' functionality won't pause when I stop hovering over its element. 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. 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; } } ``` Thank you for your help :)