CSS3 Animation animation, the delay between the loop to do how to get

when using CSS to do some small animation, some animations we need to play the loop, and in some of the animation we need to have a certain interval between the previous loop and the next loop, this time the Animation-delay and Transition-delay It only takes effect at the beginning of the first animation, and it doesn't work between the two loops, which is the time interval between loops that we need to implement in other ways.

Method: As the following program, we can set the total time for the animation to 4s, and then starting from 75%, with the back of the 1s to do the animation, the front 3s as the start of each animation before the delay, so that you can solve the cyclic delay failure problem.

div{

Animation:move 4s ease infinite;

}

@keyframes move{

75%{Transform:translatex (0px);}

100%{Transform:translatex (100px);}

}

CSS3 Animation animation, the delay between the loop to do how to get