Задержка после каждой анимации css

Question

Я использовал ниже код css3 для анимации и поворота моего логотипа на 360 градусов и его работу в порядке, как я могу приостановить анимацию через 2 секунды после каждого поворота на 360 градусов?

@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

вы можете включить паузу внутри самой анимации:

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

} 

демо http://codepen.io/anon/pen/DmgcE