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

【问题标题】：css animate elements left to right with pause in betweencss动画元素从左到右，中间有暂停
【发布时间】：2017-05-21 14:46:55
【问题描述】：

我有一排四个图标，我想从右到左制作动画，但我希望动画在某个点暂停，以便每个图标在带圆圈的蒙版中一个接一个地可见。我只是不知道如何在关键帧的中间暂停。我想知道它是否可能以及是否可以在没有任何 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%);
  }
}

提前感谢您的帮助

【问题讨论】：

你想要这样的东西吗：jsfiddle.net/v4yy049v ？

标签： css animation translate keyframe

【解决方案1】：

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

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

.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 错开你的动画。

【讨论】：