在使用css做一些小的动画时,有些动画中我们需要上一个循环与下一个循环之间存在一定的时间间隔,这个时候的animation-delay和transition-delay 只会在第一次动画开始的时候生效,而在两个循环动画之间是不生效的,这时我们就需要用其他的方法来实现循环之间的时间间隔。
给动画的总时间设置一个时间,比如4秒,然后设置动画从75%开始,前面的3秒用作每次动画开始之前的延时,后面的1秒来做动画,
例如:
@keyframes move{
/* 此处从75%开始 */
75%{ transform: translateX(0px);}
100%{ transform: translateX(100px);}
}