Animation-fill-mode: none | forwards | backwards | both; retrieves or sets the State beyond the animation time of the object .,

Animation-fill-mode: none | forwards | backwards | both; retrieves or sets the State beyond the animation time of the object .,

The css3 animation has been used on the mobile phone sharing page over the past few days. Some of its attributes are listed to facilitate future search.

Animation attributes:

Animation-name: none | <identifier> [, none | <identifier>] *; defines one or more animation names.

Animation-duration: <time> [, <time>] *; specifies the duration of the object animation.

Animation-timing-function: linear | internal | memory-in | memory-out | memory-in-out | step-start | step-end | steps (<number> [, [start | end]?) | Cubic-bezr (<number >,< number> )[, linear | bytes-in | bytes-out | bytes-in-out | step-start | step-end | steps (<number> [, [start | end]?) | Cubic-bezr (<number >,< number>)] *; specifies the duration of the object animation.

Animation-delay: <time>; specifies the duration of the object animation.

Animation-iteration-count: <number> | infinite; specifies the number of times the object animation is played cyclically.

Animation-direction: normal | reverse | alternate-reverse [, normal | reverse | alternate-reverse] *; specifies the direction of object animation motion.

Animation-play-state: running | paused: Retrieves or sets the state of an object animation.

Animation-fill-mode: none | forwards | backwards | both; retrieves or sets the State beyond the animation time of an object.

Transition property:

Transform presents a kind of deformation result, while Transation presents a kind of transition. In layman's terms, it is an animation conversion process, such as gradual display, fading, and animation speed. Transition and transform are two different Animation models. Http://www.w3.org/TR/css3-transitions/

Transition can be used together with Transform.

Transition is a composite attribute that can define both transition-property, transition-duration, transition-timing-function, and transition-delay sub-attribute values.

Transition-property: all | none | <property> [, <property>] *; sets the CSS attribute to be animated.

Transition-duration is used to define the length of time for converting an animation, that is, the time it takes to change from the old property to the new property, in seconds.

By default, the animation transition time is 0 seconds, so when we specify an element animation, we will not see the transition process and directly see the result.

Transition-duration: <time> [, <time>] *; sets the animation transition time.

Transition-delay is used to define the delay time of the transition animation.

The time can be a positive integer, negative integer, and 0. When the value is not 0, the Unit must be set to s (seconds) or ms (milliseconds );

When it is a negative number, the transitional action will be displayed from this time point, and the previous action will be truncated; when it is a positive number, the transitional action will be delayed.

Transition-delay: <time> [, <time>] *; specifies the animation Execution delay time.

Transition-timing-function is used to define the effect of a transition animation.

Transition-timing-function: linear | partition-in | partition-out | partition-in-out | cubic-bezr (<number>, <number>) [, linear | week-in | hour-out | week-in-out | cubic-bezr (<number>, <number>)] *; specifies the animation execution mode (easing effect ).