Why does animation pause on hover work in IE but not Chrome or Edge?

时间：2015-12-10 01:48:54

标签： html css css3 css-animations

I have the HTML and CSS working to create a scrolling slideshow of 3 images in the same place. I want the animation to pause when I hover over any of the pictures and then just start up again where the animation left off when I stop the hover. The following code works in Internet Explorer, but not in Chrome or Edge. I need it to work in any browser. Can anyone tell me what I am doing wrong?

div.slideshow3 {
  position: relative;
  height: 300px;
  width: 300px;
}
div.slideshow3 figure {
  margin: 0;
  position: absolute;
}
div.slideshow3:hover figure {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
div.slideshow3 figure:nth-child(1) {
  -webkit-animation: xfade3 15s 10s infinite;
  animation: xfade3 15s 10s infinite;
}
div.slideshow3 figure:nth-child(2) {
  -webkit-animation: xfade3 15s 5s infinite;
  animation: xfade3 15s 5s infinite;
}
div.slideshow3 figure:nth-child(3) {
  -webkit-animation: xfade3 15s 0s infinite;
  animation: xfade3 15s 0s infinite;
}
@-webkit-keyframes xfade3 {
  0% {
    opacity: 1;
  }
  31.3% {
    opacity: 1;
  }
  33.3% {
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes xfade3 {
  0% {
    opacity: 1;
  }
  31.3% {
    opacity: 1;
  }
  33.3% {
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<div class="slideshow3">
  <figure>
    <img src="http://lorempixel.com/300/300/nature/1" style="width:300px; height:300px;">
  </figure>
  <figure>
    <img src="http://lorempixel.com/300/300/nature/2" style="width:300px; height:300px;">
  </figure>
  <figure>
    <img src="http://lorempixel.com/300/300/nature/3" style="width:300px; height:300px;">
  </figure>
</div>

2 个答案:

答案 0 :(得分：3)

首先，Chrome和Edge中的行为是正确的，这可能是微软在最新浏览器中纠正行为的原因。

它不起作用的原因非常简单。悬停选择器（暂停 动画）与设置动画的其他选择器具有相同的特异性，此外，在CSS文件中的悬停选择器之后指定其他选择器。这使得它们在任何时间点都优先于悬停选择器（即使悬停开启时）。因此，animation-play-state永远不会设置为paused，因此动画会继续运行。

让我们一个一个地看看选择器的特殊性：

  • div.slideshow3:hover figure

    • 上述选择器中的ID选择器数量为0（所以a = 0）
    • 其中的类/属性/伪类选择器的数量是2（所以b = 2）
    • 其中的类型/伪元素选择器的数量是2（所以c = 2）
    • 因此，其整体特异性为022。

  • div.slideshow3 figure:nth-child(1)

    • 上述选择器中的ID选择器数量为0（所以a = 0）
    • 其中的类/属性/伪类选择器的数量是2（所以b = 2）
    • 其中的类型/伪元素选择器的数量是2（所以c = 2）
    • 因此，这个的整体特异性也是022，但稍后在CSS文件中指定。

您可以阅读有关CSS选择器特异性here的更多信息。

您可以通过两种方式解决此问题，具体如下：

  • 将hover选择器移动到所有动画定义选择器下方。这使得hover选择器优先于其余选择器，因此将在容器悬停时暂停动画。这是最简单的解决方案。

    ＆＃13;
    ＆＃13; 
    div.slideshow3 {
  position: relative;
  height: 300px;
  width: 300px;
}
div.slideshow3 figure {
  margin: 0;
  position: absolute;
}
div.slideshow3 figure:nth-child(1) {
  -webkit-animation: xfade3 15s 10s infinite;
  animation: xfade3 15s 10s infinite;
}
div.slideshow3 figure:nth-child(2) {
  -webkit-animation: xfade3 15s 5s infinite;
  animation: xfade3 15s 5s infinite;
}
div.slideshow3 figure:nth-child(3) {
  -webkit-animation: xfade3 15s 0s infinite;
  animation: xfade3 15s 0s infinite;
}
div.slideshow3:hover figure {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
@-webkit-keyframes xfade3 {
  0% {
    opacity: 1;
  }
  31.3% {
    opacity: 1;
  }
  33.3% {
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes xfade3 {
  0% {
    opacity: 1;
  }
  31.3% {
    opacity: 1;
  }
  33.3% {
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
    ＆＃13; 
    <div class="slideshow3">
  <figure>
    <img src="http://lorempixel.com/300/300/nature/1" style="width:300px; height:300px;">
  </figure>
  <figure>
    <img src="http://lorempixel.com/300/300/nature/2" style="width:300px; height:300px;">
  </figure>
  <figure>
    <img src="http://lorempixel.com/300/300/nature/3" style="width:300px; height:300px;">
  </figure>
</div>
    ＆＃13;
    ＆＃13;
    ＆＃13;

  • 替代方法是将您的悬停选择器指定为div.slideshow3:hover figure:nth-child(n)。这意味着选择器中有3个类/伪类选择器，因此特异性变得高于其他选择器。 nth-child(n)基本上选择全部，所以这不是问题。

    ＆＃13;
    ＆＃13; 
    div.slideshow3 {
  position: relative;
  height: 300px;
  width: 300px;
}
div.slideshow3 figure {
  margin: 0;
  position: absolute;
}
div.slideshow3:hover figure:nth-child(n) {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
div.slideshow3 figure:nth-child(1) {
  -webkit-animation: xfade3 15s 10s infinite;
  animation: xfade3 15s 10s infinite;
}
div.slideshow3 figure:nth-child(2) {
  -webkit-animation: xfade3 15s 5s infinite;
  animation: xfade3 15s 5s infinite;
}
div.slideshow3 figure:nth-child(3) {
  -webkit-animation: xfade3 15s 0s infinite;
  animation: xfade3 15s 0s infinite;
}
@-webkit-keyframes xfade3 {
  0% {
    opacity: 1;
  }
  31.3% {
    opacity: 1;
  }
  33.3% {
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes xfade3 {
  0% {
    opacity: 1;
  }
  31.3% {
    opacity: 1;
  }
  33.3% {
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
    ＆＃13; 
    <div class="slideshow3">
  <figure>
    <img src="http://lorempixel.com/300/300/nature/1" style="width:300px; height:300px;">
  </figure>
  <figure>
    <img src="http://lorempixel.com/300/300/nature/2" style="width:300px; height:300px;">
  </figure>
  <figure>
    <img src="http://lorempixel.com/300/300/nature/3" style="width:300px; height:300px;">
  </figure>
</div>
    ＆＃13;
    ＆＃13;
    ＆＃13;

注意：尽管hover选择器在执行上述更改之后优先，但动画仍未在 Edge 独自一人。上面提到的更改确实解决了Chrome，Firefox，Safari中的问题，也适用于IE11，IE10 。

Edge中的行为似乎非常不稳定。如果您是第一次打开this demo，动画将会运行，当您悬停时它也会在Edge中暂停，但如果您对代码进行任何虚拟更改并单击＆＃34;运行＆＃34;按钮，它不再有效。这是无法解释的。我在this chat room中与其他几位用户进行了核对，并且每个人都在Edge中看到了相同的行为。

不幸的是，似乎没有办法让它在Edge中运行。我尝试了各种各样的选择器组合（甚至尝试使用JS的内联样式），但它根本不尊重动画的状态变化。然而，选择器工作正常。在下面的代码段中，您可以注意到悬停时border更改，但动画没有任何变化。

＆＃13;
＆＃13; 
div.slideshow3 {
  position: relative;
  height: 300px;
  width: 300px;
}
div.slideshow3 figure {
  margin: 0;
  position: absolute;
}
div.slideshow3:hover figure:nth-child(n) {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  border: 4px solid brown; /* hover border */
}
div.slideshow3 figure:nth-child(1) {
  -webkit-animation: xfade3 15s 10s infinite;
  animation: xfade3 15s 10s infinite;
  border: 4px solid red; /* default border */
}
div.slideshow3 figure:nth-child(2) {
  -webkit-animation: xfade3 15s 5s infinite;
  animation: xfade3 15s 5s infinite;
  border: 4px solid red; /* default border */
}
div.slideshow3 figure:nth-child(3) {
  -webkit-animation: xfade3 15s 0s infinite;
  animation: xfade3 15s 0s infinite;
  border: 4px solid red; /* default border */
}
@-webkit-keyframes xfade3 {
  0% {
    opacity: 1;
  }
  31.3% {
    opacity: 1;
  }
  33.3% {
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes xfade3 {
  0% {
    opacity: 1;
  }
  31.3% {
    opacity: 1;
  }
  33.3% {
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
＆＃13; 
<div class="slideshow3">
  <figure>
    <img src="http://lorempixel.com/300/300/nature/1" style="width:300px; height:300px;">
  </figure>
  <figure>
    <img src="http://lorempixel.com/300/300/nature/2" style="width:300px; height:300px;">
  </figure>
  <figure>
    <img src="http://lorempixel.com/300/300/nature/3" style="width:300px; height:300px;">
  </figure>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：-1)

In any browser you are going to have to work with different parameters as each browser is going to be different. That is something you will just have to accept. However, there are things that you can do to accommodate the different browsers. In order to force it to fit, from what I learned in my html class, you are going to have to adapt your h&w so that it fits within the every browser and then check every browser.

OR just understand that you cannot write a program, in html, to fit every browser.

相关问题
最新问题