跳点动画

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/

Answer 2

使用“动画：跳跃1s无限;”直接，您将覆盖.dot元素的animation-delay属性。

尝试以下代码段，看看您是否正在尝试这样做：

.dots-cont{
  position: absolute;
  left: 100px;
  top: 100px;
}

.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-name: jump;
    animation-duration: .3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
   animation-timing-function: ease;
  }

 .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 {
   from {bottom: 0px}
   to {bottom: 20px}
 }
 @-webkit-keyframes jump {
   from {bottom: 0px}
   to {bottom: 10px}
 }

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

Answer 3

我改变了

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

到

.anim .dot {...}

然后我用jQuery添加和删除anim类。