One, key frame
1. Notation: @keyframs (0%~100%)
@keyframsNAME {
0% {
CSS style {color:red;}
}
. .
. .
. .
}100% {
CSS style {color:red;}
}
the finer the frame design, the more realistic the animation! No triggering required compared to transitions
2, the implementation of animation required properties;
Amimation-name: Give the animation a name
animation-duration: Set animation duration
animation-timing-function: Set rate
function: Ease gradually slows down
Linear Uniform
ease-in Acceleration
Ease-out deceleration
ease-in-out acceleration and deceleration first
cubic-bizer: Custom Time Curve (X1,y1,x2,y2) four values of two points [0~1];
Animation-delay: Delay
Animation-iteration-count: The number of times the animation was executed, Infinite unlimited time by default
Animation-play-state: Used to control the animation playback state running;paused;
animation-direction: Direction of playback
Normal playback alternate means that the animation plays normally in odd number of times (1, 3, 5, and so on) and plays backwards in an even number of times (2, 4, 6, and so on).
The animation property is a shorthand property that defines various aspects of the animation:
–animation:name Duration timing-function delay iteration-count direction;
In this summer with HTML5 (eight)
