CSS3 animation动画,循环间的延时执行时间

如下代码,其中的delay值为3s,但是animation按现在的规则,这个delay是指动画开始前的延时,在动画循环执行间,这个delay是不生效的。

.item{
  webkit-animation: revolving 1s 3s infinite;
  animation: revolving 1s 3s infinite;
}
@-webkit-keyframes revolving{
  0%{
    -webkit-transform: perspective(700px) rotateX(90deg);
  }
  50%{
    -webkit-transform: perspective(700px) rotateX(0deg);
  }
  100%{
    -webkit-transform: perspective(700px) rotateX(-90deg);
  }
}
把总动画设为4秒,然后前75%也就是3秒都没变化(0-75%),之后的25%也就是1秒做动画就可以了。

.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); } }

 

posted @ 2017-03-03 18:35  front-gl  阅读(4619)  评论(0编辑  收藏  举报