使用animation-delay。

animation: a, b;
animation-duration: 2s, 2s; 
animation-delay: 0s, 4s;

字符串
动画b将在4秒后开始，而动画a将在没有任何延迟的情况下开始。

在纯CSS中实现这一点的唯一方法是同时运行所有动画并进行一些计算：

• 每个动画的长度应该相同，等于所需动画的总长度（这意味着如果你想要两个15秒的动画，CSS动画应该设置为30秒的长度，没有延迟）
• 要控制每个动画的开始/结束点，您需要相应地修改百分比-在上面的情况下，这意味着第一个动画在50%结束，第二个动画开始。此外，所有中间值都需要插值。对于两个动画，但你可能需要使用计算器，因为动画的总数增加。这是如果我们不考虑延迟-数字变化时，我们有一个15-第二个动画将在5秒后完成动画，现在等于33%，等等。

当你在这里看到它的作用时，它会更清楚：

.animated-example {
  width: 300px;
  height: 200px;
  border: solid 1px #1A7404;
  position: absolute;
  background-color: #62A80A;
}

.animated {  
  animation-duration: 20s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}


@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }
  6% {
    opacity: 1;
    transform: translateX(30px);
  }
  8% {
    transform: translateX(-10px);
  }
  10% {
    transform: translateX(0);
  }
  40% {
    opacity: 1;
    transform: translateX(0);
  }
  42% {
    opacity: 1;
    transform: translateX(30px);
  }
  55% {
    opacity: 0;
    transform: translateX(-2000px);
  }
  100% {
    opacity: 0;
    transform: translateX(-2000px);
  }
}



@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }
  50% {
    opacity: 0;
    transform: translateY(-2000px);
  }
  56% {
    opacity: 1;
    transform: translateY(30px);
  }
  58% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(0);
  }
  90% {
    transform: translateY(0);
  }
  92% {
    opacity: 1;
    transform: translateY(30px);
  }
  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
}

个字符

animation-delay会做你正在寻找的事情 * 除了 * 你希望动画在最后一个完成后重复的事实;不幸的是，（目前）没有办法指定循环动画迭代之间的延迟。
但是，您可以使用一点JavaScript来实现您想要做的事情，如下所示。要添加更多动画，只需将它们的类名添加到代码开头的animations数组中。

var animations=["bounceInLeft","bounceInDown"],
    count=animations.length,
    classlist=document.querySelector("img").classList,
    holder=document.createElement("div"),
    style=window.getComputedStyle(holder),
    delay=15,
    current,wait,x;
holder.style.display="none";
document.body.appendChild(holder);
animate();
function animate(){
    wait=0;
    x=0;
    while(x<count){
        setTimeout(function(a){
            classlist.remove(current);
            classlist.add(a);
            current=a;
        },wait*1000,animations[x]);
        holder.className=animations[x];
        wait+=delay+parseInt(style.getPropertyValue("animation-duration"));
        x++;
    }
    setTimeout(animate,wait*1000);
};

img{
    animation-fill-mode:both;
    height:200px;
    width:300px;
}
.bounceInDown{
    animation-duration:1s;
    animation-name:bounceInDown;
}
.bounceInLeft{
    animation-duration:2s;
    animation-name:bounceInLeft;
}
@keyframes bounceInDown{
    0%{
        opacity:0;
        transform:translateY(-2000px);
    }
    60%{
        opacity:1;
        transform:translateY(30px);
    }
    80%{
        transform:translateY(-10px);
    }
    100%{
        transform:translateY(0);
    }
}
@keyframes bounceInLeft{
    0%{
        opacity:0;
        transform:translateX(-2000px);
    }
    60%{
        opacity:1;
        transform:translateX(30px);
    }
    80%{
        transform:translateX(-10px);
    }
    100%{
        transform:translateX(0);
    }
}

<img src="http://webmarketingtoday.com/wp-content/uploads/Screen-Shot-2012-05-24-at-7.31.54-AM-288x216.png">

我已经成功地实现了类似的东西，通过适应这个概念由诺亚艾迪：http://digitalfio.github.io/Stagger.css/
你需要在时间上做一些工作来获得你想要的15秒延迟，但除此之外，它应该是相当简单的。