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

标签：

    在使用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