纯 CSS 悬停停止动画

Question

我需要在悬停时停止以下 Codepen 项目的动画。

我虽然添加

.photo:hover{
animation-play-state:paused;
-webkit-animation-play-state:paused;
}

可能就足够了，但它仅适用于可见图像，而其他三个动画在背景中继续。

我该如何解决？

感谢阅读

Answer 1

您应该在 .container 上使用 :hover 伪 class，然后在所有 .photo

上暂停动画

body {
  background: #000;
}

.container {
  margin: 50px auto;
  width: 500px;
  height: 300px;
  overflow: hidden;
  border: 10px solid;
  border-top-color: #856036;
  border-left-color: #5d4426;
  border-bottom-color: #856036;
  border-right-color: #5d4426;
  position: relative;
}

.photo {
  position: absolute;
  animation: round 16s infinite;
  opacity: 0;
}

@keyframes round {
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
img:nth-child(1) {
  animation-delay: 12s;
}

img:nth-child(2) {
  animation-delay: 8s;
}

img:nth-child(3) {
  animation-delay: 4s;
}

img:nth-child(4) {
  animation-delay: 0s;
}
.container:hover .photo {
animation-play-state:paused;
-webkit-animation-play-state:paused;
}

<div class="container">
  <img class='photo'  src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
  <img class='photo'  src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" />
  <img class='photo'  src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
  <img class='photo'  src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />

</div>

纯 CSS 悬停停止动画

Pure CSS on hover stop animation

css

keyframe

onhover

css-animations