Delay after each css animation

Question

I used below css3 code to animate and rotate my logo 360 degree and its work currectly, how can I pause animation 2 second after every 360 degree rotation?

@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;
}

Answer 1

you may include pause inside the animation itself :

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

}

demo http://codepen.io/anon/pen/DmgcE