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

Source: Internet
Author: User

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 ).




Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.