CSS (v): animations

• Animation-name

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

• @keyframes

Grammar:
@keyframes <identifier>{
[From|to|<percentage>] {Srules} [,*]
}
Called KeyFrames, which are similar to keyframes in Flash. In CSS3 it begins with "@keyframes", followed by the animated name plus a pair of curly braces "{...}", in parentheses, which are the different time-period style rules.

1 / * Define a right-moving animation called "fromlefttoright" * / 2 @keyframes fromlefttoright{3    from{margin:0;} 4     to{margin:100px;} 5 }

• Animation-duration

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

1 / * give Div a animated effect named "Fromlefttoright", and last for one second * / 2 div{3    animation-name:fromlefttoright;4    animation-duration:1s; 5 }

• Animation-timing-function

Type of transition speed for animations
Syntax: animation-timing-function:ease|linear|ease-in|ease-out|ease-in-out

1 / * give Div a animated effect named "Fromlefttoright", which lasts one second and the transition type is ease-in*/ 2 div{3    animation-name:fromlefttoright;4    animation-duration:1s; 5     animation-timing-function:ease-in; 6 }

• Animation-delay

Set the delay time for an animation
Syntax: Animation-delay: <time>[,<time>]*

1 /* give Div a animated effect named "Fromlefttoright", delay after one second */2div{3     animation-name:fromlefttoright;4    animation-duration:1s; 5     animation-timing-function:ease-in; 6     animation-delay:1s; 7 }

• Animation-iteration-count

Set the number of times an animation is executed
Grammar:animation-iteration-count:infinite|<number>
Infinite represents an infinite number of times

1 /* give Div a animated effect named "Fromlefttoright", perform two stop/2div{3     animation-name:fromlefttoright;4    animation-duration:1s; 5     animation-timing-function:ease-in; 6     animation-iteration-count:2; 7 }

• Animation-direction

Sets whether the animation executes in reverse order in the loop
Syntax: Animation-direction:normal|reverse|alternate|alternate-reverse
Description
Normal: Regular direction
Reverse: Running in the opposite direction
Alternate: Animation runs normally and then runs in opposite directions and runs continuously alternately
Alternate-reverse: Animation runs in reverse direction and runs continuously alternately

1 / * give Div a animated effect named "Fromlefttoright" and run repeatedly * / 2 div{3    animation-name:fromlefttoright;4    animation-duration:1s; 5     animation-timing-function:ease-in; 6     Animation-iteration-count:infinite; 7     animation-direction:alternate; 8 }

• Animation-fill-mode

Set the state at which the animation begins to end
Syntax: Animation-fill-mode:none|forwards|backwards|both
Description:
None: Default value. The state of the animation is not set
forwards: Sets the state of the object at the end of the animation
Backwards: Sets the state of the object to the beginning of the animation
both: Sets the state of the object to the end of the animation or to the start status

1 / * give Div a animated effect named "Fromlefttoright" and the element at the end of the animation at the end of the animation * / 2 div{3    animation-name:fromlefttoright;4    animation-duration:1s; 5     animation-timing-function:ease-in; 6     Animation-iteration-count:3; 7     animation-fill-mode:forwards; 8 }

• Animation-play-state

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

  1  /* gives Div an animated effect named "Fromlefttoright". And pause the animation when the div is in the hover state */  div{ Span style= "color: #008080;" > 3   Animation-name:fromlefttoright;   4
      animation-duration:1s;    animation-timing-function:ease-in;    Animation-iteration-count:infinite;   "   8  div:hover{  9   animation-play-state:paused;  10 } 

• Animation

Shorthand properties for animations
Grammar:
animation:[Animation-name] | | [Animation-duration] | | [Animation-timing-function] | | [Animation-delay] | | [Animation-iteration-count] | | [Animation-direction] | | <single-animation-fill-mode> | | <single-animation-play-state> [, *]

CSS (v): animations