如何同时运行两个 CSS 动画？

Question

我想执行两个动画，而不停止第一个。

我会告诉你这会更容易。这是我的代码：

animation: hover  7s, shake .2s 3s infinite;

我有两个动画，分别称为 hover 和 shake。摇一摇应该在 3 秒后执行，所以在第一个 hover 期间执行，因为这个摇一摇的时间设置为 7 秒。

它的目标是在最后让一个圆圈变小并同时摇晃。

但是当 shake 开始时它会停止悬停，即使 hover 应该还剩 4 秒。

有解决这个问题的办法吗？我试图一次制作所有动画，但它不能正常工作。

我是否必须只制作一个动画而不是两个？

这里是动画的代码：

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(1px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-3px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(3px, 0, 0);
  }
}

@keyframes hover {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(0.3);
  }
}

Answer 1

问题在于第二个样式规则隐藏了第一个样式规则，因为它们都作用于transform 属性。

将您的元素包装成div 并给父级一个动画（“悬停”）和另一个子级（“摇动”）。请注意，您为“摇晃”动画设置了3s 延迟。

.hover {
  animation: hover 7s infinite running;
}

.cursor {
  animation: shake .2s 3s infinite running;
  &:after {
    opacity: 1;
  } 
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(1px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-3px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(3px, 0, 0);
  }
}

@keyframes hover {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(0.3);
  }
}

.parent {
  height: 25px;
  width: 25px;
  left: 0;
  right: 0; 
  top:0;
  bottom: 0;
  margin: auto;
}

.cursor {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  right: 0; 
  top:0;
  bottom: 0;
  margin: auto;
  border: 1px solid #293133;
    &:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 50%;
    opacity: .5;
  }
}

<div class="parent hover">
  <div class="cursor"></div>
</div>

这是一个有效的Codepen