每个css动画后的延迟

我用下面的css3代码来制作和旋转我的徽标360度动画和当前的工作，如何在每次360度旋转后暂停动画2秒

@keyframes logo {
   from {transform: rotateY(360deg);}
}
@-webkit-keyframes logo {
 from {-webkit-transform: rotateY(360deg);}
}
#logo:first-of-type{
width:120px;
-webkit-animation-name: logo;
-moz-animation-name: logo;
-o-animation-name: logo;
animation-name: logo;
animation:logo 3s infinite;
-webkit-animation:logo 3s infinite;
animation-duration:2s;
-webkit-animation-duration:2s;
animation-delay:2s;
-webkit-animation-delay:2s;
}

---

可以在动画本身中包含暂停：

---

demo

有没有办法定义延迟时间？动画延迟，仅延迟动画开始的时刻，如果您想在动画中设置步骤，则必须设置步骤：）

@keyframes rotit {
  from {
    transform:rotatey(360deg);
  }
    66%, 100% {
      transform:rotatey(0deg);
    }

}