每個css動畫後的延遲

Question

我用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; 
} 

Answer 1

可能包括動畫本身內暫停：

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

} 

演示http://codepen.io/anon/pen/DmgcE