CSS3 animation动画，循环间的延时执行该怎么弄？-PHP中文网问答

CSS3 animation动画，循环间的延时执行该怎么弄？

高洛峰 2017-04-17 11:02:57

[CSS3讨论组]

1229

如下代码，其中的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);
  }
}

高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。网络人气名人讲师，...

全部回复(1)

大家讲道理2017-04-17 11:04:57 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);
  }
}

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

赞 +0

添加回复