CSS多个动画对单个元素，没有javascript [英] CSS Multiple Animations on single element, no javascript

问题描述

我尝试只使用CSS而不使用Javascript创建图片幻灯片。

I am trying to create an image slideshow using only CSS and no Javascript.

我有一个ALMOST工作示例： http://codepen.io/k/pen/Dkhei 。
问题是，当我停止在其元素上方悬停时，上一个功能的动画不会暂停。

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.

我在单个元素上定义两个动画，其类名为'imageContainer'。我很想知道我的语法是错误的，或者我想做的是不可能的。

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

感谢您的帮助：）

推荐答案

根据W3C animation-name 属性链接

如果多个动画尝试修改相同的属性，则最接近名称列表末尾的动画会胜出。

If multiple animations are attempting to modify the same property, then the animation closest to the end of the list of names wins.

在你的例子中， showImagesPrev 首先被引用， showImagesNext 是最后一个，所以它按照W3C正确工作。如果你交换这两个引用，上一个将正常工作，而下一个按钮重现问题。有效的示例

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

这篇关于CSS多个动画对单个元素，没有javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！