CSS3 animations
A complete CSS animations consists of two parts
- A defined set of animation keyframes: @keyframes rules
- Description of the animation CSS declaration: animation properties
1. @ keyframes rules
To create animations using CSS3 in @keyframes rules, keyframes can set multiple keyframes, each keyframe animation represents a state in the process, you can make multiple keyframe animation is very brilliant.
(1) Basic syntax:
@keyframes animationname{
keyframes-selector{css-style;}
}
(2) sub-attributes explained:
- animationname: animation represents the current name, it will serve as unique identification when references can not be empty
- keyframes-selector: selector is a key frame, i.e. to specify the current key frame to be applied to the entire animation process position value may be a percentage, from or to. Which, from the same effect and 0% representing the animation began, to the same effect and 100% indicates the end of the animation.
- css-styles: corresponding to the current key frame is defined when the execution state of the animation
of these three attributes are essential and indispensable
2.animation property
animation attributes used to describe animation CSS declarations, including the designation of specific and long animation and animation behavior.
(1) The basic syntax:
animation： name duration timing-function delay iteration-count direction fill-mode play-state；
(2) sub-attributes explained:
| Attributes | description |
|---|---|
| animation-name | It specifies the name of @keyframes animation. |
| animation-duration | Animation complete a specified period of time spent. The value for the time value |
| animation-timing-function | Speed curve provisions of animation, with the value of similar transition |
| animation-delay | The delay before the start of the provisions of the animation, the value is the value of time |
| animation-iteration-count | Provisions Animations are played. n: Custom Animation Views values; infinite: the provisions of animation should play unlimited |
| animation-direction | Whether the provisions of animation reverse play in the next cycle. normal: default value, normal playback; alternate: turn reverse play animation |
| animation- fill-mode | Provisions animation before or after the play, its animation is visible. none: does not change the default behavior; forwards: When the animation is completed, the last holding an attribute value; backwards: the animation-delay within a specified period of time before the animation display, the application start property value; both: the forward and backward fill patterns are applied |
| animation-play-state | Whether the provisions of the animation is running or paused. paused: Animation provisions have been suspended; running: the default value, the provisions of the animation is playing |
