我有一个带有以下内容的
css3动画:
@-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } .animated { -webkit-animation-name: rotate; -webkit-animation-duration: 2.4s; -webkit-animation-iteration-count: infinite; -webkit-transition-timing-function: ease-in-out; }
它完美无瑕,好吧……,我想让它在循环之间等待:
动画开始,动画完成,等待(约0.5秒),动画开始,动画结束,等待(约0.5秒)……
PS:我试过-webkit-animation-delay,它不起作用.
有帮助吗?
解决方法
在动画持续时间内添加0.5秒,然后在关键帧中创建一个额外的帧,不会改变旋转量;
@-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); } 83% { /*2.4 / 2.9 = 0.827*/ -webkit-transform: rotate(360deg); } 100% { -webkit-transform: rotate(360deg); } } .animated { ... -webkit-animation-duration: 2.9s; /*note the increase*/ ... }
小演示:little link.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。