css 动画元素从左到右，中间有暂停

Question

我有一排四个图标，我想从右到左制作动画，但我希望动画在某个点暂停，以便每个图标在一个带圆圈的蒙版中一个接一个地可见。我只是不知道如何在关键帧的中间暂停。我想知道是否有可能，如果没有任何 Javascript 是否有可能非常感谢

这是我现在拥有的:

 @keyframes move {
  0% {
    opacity: 0;
    -webkit-transform: translateX(200%);
    -moz-transform: translateX(200%);
    -ms-transform: translateX(200%);
    -o-transform: translateX(200%);
    transform: translateX(200%);
  }
  25% {
    opacity: 1;
  }
  50% {
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
  75% {
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
.icons {
  -webkit-animation: move 4s ease-in 2;
  -moz-animation: move 4s ease-in 2;
  animation: move 4s ease-in 2;
}
  100% {
    -webkit-transform: translateX(-200%);
    -moz-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    -o-transform: translateX(-200%);
    transform: translateX(-200%);
  }
}

预先感谢您的帮助

Answer 1

如果您可以提供您的 HTML 并进一步说明，那么您可能会更容易准确地理解您要实现的目标。

但是如果你只想错开你的图标，你可以使用 :nth-child 伪选择器在不同的图标上放置一个独特的延迟，然后调整你的动画百分比以保持图标在你想要的时间定位.

.icons:nth-child(2) {
   animation-delay: 1s;
}
.icons:nth-child(3) {
  animation-delay: 2s;
}
.icons:last-child {
  animation-delay: 3s;
}

---

Here is a working example使用 nth-child 错开动画。