Article Directory
animation
animationIt is similar to the frame-by-frame animation in flash. The frame-by-frame animation is like the playback of a movie, with very delicate performance and great flexibility. However transition, only the start and end states are specified, and the entire animation process is also controlled by a specific function. Students who have studied flash know that this frame-by-frame animation is composed of key frames, and the continuous playback of many key frames forms an animation. In CSS3, frame-by-frame animation is completed by attributes keyframes.
animation
It is shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, :animation-iteration-countanimation-direction
.animation {
animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*;
}
@keyframes
@keyframes animationName {
from {
properties: value;
}
percentage {
properties: value;
}
to {
properties: value;
}}//or
@keyframes animationName {
0% {
properties: value;
}
percentage {
properties: value;
}
100% {
properties: value;
}}
- animationName: animation name, named by the developer himself;
- Percentage: It is a percentage value, and multiple percentage values can be added;
- properties: style attribute name, for example: color, left, width, etc.
animation-name
It is the name used to set the animation, and multiple animation names can be assigned at the same time, separated by,:
.animation {
animation-name: none | IDENT[,none | IDENT]*;
}
animation-duration
It is used to set the duration of the animation, the unit is s, and the default value is 0:
.animation {
animation-duration: <time>[,<time>]*;}
animation-timing-function
Similar to transition-timing-function:
.animation {
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*;
}
animation-delay
It is to set the start time of the animation, the unit is s or ms, the default value is 0:
.animation {
animation-delay: <time>[,<time>]*;
}
animation-iteration-count
It is to set the number of animation loops, the default is 1, and infinite is an infinite number of loops:
.animation {
animation-iteration-count:infinite | <number> [, infinite | <number>]*;
}
animation-direction
It is used to set the direction of animation playback. The default value is normal, which means playing forward. Alternate means that the animation is played forward for the even number of times, and played in the opposite direction for the odd number of times:
.animation {
animation-direction: normal | alternate [, normal | alternate]*;
}
animation-play-state
It is mainly to control the playback state of the animation: running means playing, and paused means stopping playing, and running is the default value:
.animation {
animation-play-state:running | paused [, running | paused]*;
}
Summarize
CSS3We have finished introducing the three attributes of the animation , transform, transitionand animation, let us review them. transformWe can understand it as the geometric deformation of the element, which is regular and can be found. This deformation does not produce an animation effect but only changes the original shape; transitionit animationis very similar flashto the tween animation and frame-by-frame animation; transition is From one state to another state, when the change has a smooth effect, animation is generated. It is a formulaic change. We can use it in more regular animation effects, such as: rotating windmills, driving cars , color gradients, etc.; animationthe animation effect is more flexible, and can realize complex and irregular animations like movies.