CSS Multiple Animations on single element, no java

问题:

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 :)

回答1:

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