您的位置:首页技术文章
文章详情页

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

【字号: 日期:2023-08-08 18:47:26浏览:67作者:猪猪

问题描述

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

问题解答

回答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秒做动画就可以了。

标签: CSS
相关文章: