css3 animate动画每循环一次的时间间隔设置方法

.item{
  webkit-animation: revolving 4s 0s infinite;
  animation: revolving 4s 0s infinite;
}
@-webkit-keyframes revolving{
  0,75%{
    -webkit-transform: perspective(700px) rotateX(90deg);
  }
  87.5%{
    -webkit-transform: perspective(700px) rotateX(0deg);
  }
  100%{
    -webkit-transform: perspective(700px) rotateX(-90deg);
  }
}

把总动画设为4秒,然后前75%也就是3秒都没变化(0-75%),之后的25%也就是1秒做动画就可以了

具体的democan参见demo

你可能感兴趣的:(前端)