跳点动画

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元素的动画延迟属性。

尝试下面的代码片段，看看这是否是您想要做的：

​

.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类。