CSS (5): Animation and css Animation

Source: Internet
Author: User

CSS (5): Animation and css Animation

  • Animation-name

Animation name
Syntax: animation-name: none | <identifier>
The animation name defined by the element must be used with the rule @ keyframes, because the animation name is defined by @ keyframes.

 

  • @ Keyframes

Syntax:
@ Keyframes <identifier> {
[From | to | <percentage>] {sRules} [, *]
}
It is called a key frame, which is similar to a key frame in Flash. In CSS3, it mainly starts with "@ keyframes", followed by an animated name with a pair of curly braces "{…}", There are some style rules in brackets for different time periods.

1/* define an animation named "fromLeftToRight" to the right */2 @ keyframes fromLeftToRight {3 from {margin: 0;} 4 to {margin: 100px;} 5}
  • Animation-duration

Set the animation duration
Syntax: animation-duration: <time> [, <time>] *

1/* give the div an animation named "fromLeftToRight" for a second. */2 div {3 animation-name: fromLeftToRight; 4 animation-duration: 1 s; 5}
  • Animation-timing-function

Animation transition Speed Type
Syntax: animation-timing-function: Internal | linear | internal-in | memory-out | memory-in-out

1/* give the div an animation named "fromLeftToRight", lasting for one second, and the Transition type is bytes-in */2 div {3 animation-name: fromLeftToRight; 4 animation-duration: 1 s; 5 animation-timing-function: animation-in; 6}
  • Animation-delay

Set the animation Delay Time
Syntax: animation-delay: <time> [, <time>] *

1/* give the div an animation named "fromLeftToRight". After a delay of one second, execute */2 div {3 animation-name: fromLeftToRight; 4 animation-duration: 1 s; 5 animation-timing-function: animation-in; 6 animation-delay: 1 s; 7}
  • Animation-iteration-count

Set the number of animation executions
Syntax: animation-iteration-count: infinite | <number>
Infinite indicates an unlimited number of times

1/* give the div an animation named "fromLeftToRight" and stop it twice */2 div {3 animation-name: fromLeftToRight; 4 animation-duration: 1 s; 5 animation-timing-function: animation-in; 6 animation-iteration-count: 2; 7}
  • Animation-direction

Sets whether an animation is executed in reverse order in a loop.
Syntax: animation-direction: normal | reverse | alternate-reverse
Note:
Normal
Reverse: run in the opposite direction
Alternate: the animation runs normally first, then runs in the opposite direction, and continues to run alternately.
Alternate-reverse

1/* give the div an animation named "fromLeftToRight" and repeatedly run */2 div {3 animation-name: fromLeftToRight; 4 animation-duration: 1 s; 5 animation-timing-function: memory-in; 6 animation-iteration-count: infinite; 7 animation-direction: alternate; 8}
  • Animation-fill-mode

Sets the animation end state.
Syntax: animation-fill-mode: none | forwards | backwards | both
Note:
None: default value. Do not set the animation status
Forwards: sets the object state to the state when the animation ends.
Backwards: sets the object status to the state when the animation starts.
Both: Set the object status to the animation end or start state.

1/* give the div an animation effect named "fromLeftToRight" and the element is located at the end of the animation */2 div {3 animation-name: fromLeftToRight; 4 animation-duration: 1 s; 5 animation-timing-function: animation-in; 6 animation-iteration-count: 3; 7 animation-fill-mode: forwards; 8}
  • Animation-play-state

Set the animation playback status
Syntax: animation-play-state: running | paused

1/* give the div an animation named "fromLeftToRight" and pause the animation when the div is in the hover state */2 div {3 animation-name: fromLeftToRight; 4 animation-duration: 1 s; 5 animation-timing-function: memory-in; 6 animation-iteration-count: infinite; 7} 8 div: hover {9 animation-play-state: paused; 10}
  • Animation

Short attributes of an animation
Syntax:
Animation: [animation-name] | [animation-duration] | [animation-timing-function] | [animation-delay] | [animation-iteration-count] | [animation-direction] | <single-animation-fill-mode> | <single-animation-play-state> [, *]

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.