跳点动画

Question

假设我在父元素内有三个点作为跨度。

我需要创建一个父悬停动画，该动画将使点随着延迟而一一跳跃。我在没有悬停的情况下完成了此操作，但当我将鼠标悬停在父元素上时，我需要动画才能工作。当我将鼠标悬停在父元素上时，不会对子元素应用任何延迟。

.dots-cont {
  position: absolute;
  right: 0px;
  bottom: 0px;
}

.dot {
  width: 12px;
  height: 12px;
  background: #22303e;
  display: inline-block;
  border-radius: 50%;
  right: 0px;
  bottom: 0px;
  margin: 0px 2.5px;
  position: relative;
}

.dots-cont:hover > .dot {
  position: relative;
  bottom: 0px;
  animation: jump 1s infinite;
}

.dots-cont .dot-1{
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}

.dots-cont .dot-2{
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}

.dots-cont .dot-3{
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}

@keyframes jump {
0%   {bottom: 0px;}
20%  {bottom: 5px;}
40%  {bottom: 0px;}
}

<span class="dots-cont">
  <span class="dot dot-1"></span>
  <span class="dot dot-2"></span>
  <span class="dot dot-3"></span>
</span>

Answer 1

您只需将animation属性添加到.dot基础而不是:hover版本即可。这样，无论如何你都会得到相同的行为。您可以向悬停类添加任何所需的属性，例如更改颜色。

.dots {
  animation: jump 1s infinite;
}

https://jsfiddle.net/3gampq0b/5/

编辑：防止点悬停动画。

.dots-cont:hover > .dot {
  animation: none;
}

https://jsfiddle.net/3gampq0b/6/

编辑：仅在父级悬停时动画。

您还可以添加填充，.dots-cont使悬停表面积更大。

.dots-cont:hover > * {
  animation: jump 1s infinite;
}

https://jsfiddle.net/3gampq0b/7/