animation-direction
default
animation-direction: normal;
The animation is played forwards. When it reaches the end, it starts over at the first keyframe.
animation-direction: reverse;
The animation is played backwards: begins at the last keyframe, finishes at the first keyframe.
animation-direction: alternate;
The animation is played forwards first, then backwards:
- starts at the first keyframe
- stops at the last keyframe
- starts again, but at the last keyframe
- stops at the first keyframe
animation-direction: alternate-reverse;
The animation is played backwards first, then forwards:
- starts at the last keyframe
- stops at the first keyframe
- starts again, but at the first keyframe
- stops at the last keyframe
See the Pen Contoh #1 Animation Delay by Codingku (@codingku) on CodePen.