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.

我在这里有一个几乎工作示例： HTTP：//$c$cpen.io/ K /笔/ Dkhei 。
问题是，当我停止悬停在其元素为'previous功能动画不会暂停。

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

感谢您的帮助：）

推荐答案

最后找到了这个问题的原因。

At last found out the reason for this issue.

按照W3C标准<$ C C>动画名属性的链接

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.

在您的例子 showImages $ P $光伏被称为第一和 showImagesNext 是最后一个，所以它的工作正确地按照W3C标准。如果您交换这两个参考， previous 将正常工作，而下一页按钮重现该问题。一个工作例

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屋！