每个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);
    }

}

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