Question

有没有办法停止动画：悬停并让它一旦再次运行就再次运行？

此部分已解决：

~~我想过用动画状态暂停来做这件事，但是当动画在多个元素上运行时会有精确的动画延迟，这样的解决方案会使元素失去同步~~。

~~我想要实现的目标至少是＆＃39;是为了停止所有的动画。~~

仍在寻找此部分的解决方案：

而伟大的成就将是（另外）改变z-index所以悬停的图片在所有其他的前面...并且从动画回到它的z-index一旦徘徊+动画继续循环

重要的是 - 没有JAVASCRIPT （我真的很喜欢使用它，但由于某些CMS设置，我不能这样做。）

没有悬停的代码：CODEPEN和SOSnippet：

＆＃13;

.cube2>div{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  width:450px;
}

.playground2 {
  overflow: hidden;
}

.frame {
  position: absolute;
  top:-12px;
  left:-1px;
  z-index: 1;}

.one, .two, .three, .four, .five, .six, .seven, .eight{
  animation: comedown 32s infinite ease-in-out
}

.eight {
  animation-delay: 0s
}

.seven {
  animation-delay: 4s
}

.six {
  animation-delay: 8s
}

.five {
  animation-delay: 12s
}

.four {
  animation-delay: 16s
}

.three {
  animation-delay: 20s
}

.two {
  animation-delay: 24s
}

.one {
  animation-delay: 28s;
}

.container {
  background: darkkhaki;
  height: 400px;
  position: relative;
}

.cube2 {
  top: 100px;
  height: 300px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

@-webkit-keyframes comedown {
  0% {
    top: 0%;
    z-index: 1;
  }
  12.5% {
    top: 120%;
    z-index: 2;
    left:50%;
    transform:translateX(-50%);
  }
  13%{z-index:-15}
  25%{
    top:-50px;
    transform: translateX(-32%)
  }
  35%{z-index:-10}
  37.5%{
    top:-42px;
    transform: translateX(-35%);
  }
  50%{
    top:-36px;
    transform: translateX(-38%);
    z-index:-6;
  }
  62.5%{
    top:-28px;
    transform: translateX(-41%);
    z-index:-5;
  }
  75%{
    top:-20px;
    transform: translateX(-44%);
    z-index:-4;
  }
  87.5%{
    top:-12px;
    transform: translateX(-47%);
    z-index:-3;
  }
  100%{
    top:0px;
    left:50%;
    transform:translateX(-50%);
    z-index:-2;
  }

}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="playground2 container">
  <div class="cube2">
    <div class="one">
    <img class="face" src="https://s17.postimg.org/71iegzebj/img_little.png">
    <img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
    </div>
    <div class="two">
    <img class="face" src="https://s17.postimg.org/duncqzuin/img_little3.png">
    <img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
    </div>
<div class="three">
    <img class="face" src="https://s17.postimg.org/o3b8j2t6n/img_little2.png">
    <img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
    </div>
    <div class="four">
    <img class="face" src="https://s17.postimg.org/v97kz9rnj/img_little4.png">
    <img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
    </div>
<div class="five">
    <img class="face" src="https://s16.postimg.org/4reke4owl/image.png">
    <img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
    </div>
<div class="six">
    <img class="face" src="https://s16.postimg.org/3qebp07x1/image.png">
    <img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
    </div>
<div class="seven">
    <img class="face" src="https://s16.postimg.org/fgs96e0ph/image.png">
    <img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
    </div>
<div class="eight">
    <img class="face" src="https://s16.postimg.org/xxmnx7gnp/image.png">
    <img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
    </div>
  </div>
</div>

＆＃13;

Answer 1

诀窍是抓住:hover上的.cube2。这将暂停动画：

＆＃13;

.cube2:hover > div{
    -webkit-animation-play-state: paused;   /* Safari 4.0 - 8.0 */
    animation-play-state: paused;
}

＆＃13;

要使用z-index将图像框置于最前面，请使用：

＆＃13;

.cube2 > div:hover{
  z-index: 99 !important;
}

＆＃13;

Answer 2

.cube2:hover > div.one, .cube2:hover >.two, .cube2:hover >.three, .cube2:hover >.four, .cube2:hover >.five,.cube2:hover > .six, .cube2:hover >.seven, .cube2:hover >.eight{
      animation-play-state: paused;
    }

这样，因为您在.cube2上调用hover，所有动画都会停止参见：

https://jsfiddle.net/duuhr712/

CSS - 停止动画：hover（无JS）

2 个答案: