Detailed description of the Animation-direction property in CSS3

CSS3 Animation-direction Property, the CSS reference manual instance executes the animation once, and then executes the animation again in reverse. Retrieves or sets whether the object animation moves backwards in the loop

Instance

Perform the animation once and then reverse the animation again:

! DOCTYPE html> 
Browser support

Internet Explorer 10, Firefox, and Opera support the Animation-direction property.

Safari and Chrome support another property that can override this property, the-webkit-animation-direction property.

Note: The Animation-direction property is not supported in Internet Explorer 9 and its previous versions.

Definition and usage

The Animation-direction property defines whether the animation is played alternately in reverse.

Note: If the animation is set to play only once, the property will not work.

CSS syntax

Animation-direction:normal|reverse|alternate|alternate-reverse|initial|inhe
"Recommended"

1. Share a listener CSS3 animation (animation) End Event instance

2.8 large properties of the CSS3 animation (Animation) that must be mastered

3. Using the animation attribute to implement the time-lapse execution Example tutorial

4. Explain the two types of suspension in CSS3 (transition, animation)