首页 > Web开发 > 详细

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

时间:2016-08-10 20:56:03      阅读:496      评论:0      收藏:0      [点我收藏+]

    在使用css做一些小的动画时,有些动画我们是需要其循环播放的,而且在部分动画中我们需要上一个循环与下一个循环之间存在一定的时间间隔,这个时候的animation-delay和transition-delay 只会在第一次动画开始的时候生效,而在两个循环之间是不生效的,这是我们就需要用其他的方法来实现循环之间的时间间隔。

   方法:如下面的程序,我们可以把动画执行的总时间设置为4s,然后从75%开始,用后面的1s来做动画,前面的3s用作每次动画开始之前的延时,这样就可以解决循环播放delay失效的问题。

 

div{

      animation: move 4s ease infinite;

}

@keyframes move{

      75%{ transform: translateX(0px);}

      100%{ transform: translateX(100px);}

}

 

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

原文:http://www.cnblogs.com/hhhhhh/p/5758167.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!