The correct answer is: C. animation-direction
The animation-direction CSS property specifies the direction in which an animation should run. The possible values are:
- normal – The animation runs in the forward direction.
- reverse – The animation runs in the reverse direction.
- alternate – The animation alternates between the forward and reverse directions.
- alternate-reverse – The animation alternates between the forward and reverse directions, but the reverse direction is played first.
The animation-direction property can be used to create animations that loop in different ways. For example, the following code creates an animation that loops in the forward direction:
css
.my-animation {
animation-name: my-animation;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: normal;
}
The following code creates an animation that loops in the reverse direction:
css
.my-animation {
animation-name: my-animation;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: reverse;
}
The following code creates an animation that alternates between the forward and reverse directions:
css
.my-animation {
animation-name: my-animation;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
The following code creates an animation that alternates between the forward and reverse directions, but the reverse direction is played first:
css
.my-animation {
animation-name: my-animation;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
}