Which of the following CSS Property determines whether an animation should run in reverse on some cycles?

animation
animation-run
animation-repeat
none of the mentioned

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;
}

Exit mobile version