CSS3 Transitions and animations

First, CSS3 transition: (browser to add prefix, generally to cooperate with hover use, transition)
With CSS3, we can add an effect to an element when the element is transformed from one style to another without using Flash animation or JavaScript.
1. To achieve the transition, two elements must be established:
Specifies which CSS property you want the effect to be added to.
Specifies the length of the effect (in seconds).
2. Transition-property Properties
Specifies the name of the CSS property that applies the transition effect, with height, width, and so on.
3. Transition-duration Properties
Specifies the amount of time (in seconds or milliseconds) it takes to complete the transition effect.
4. Transition-timing-function Properties
A velocity curve that specifies the transition effect. This property allows the transition effect to change its speed over time. Default value: Ease (transition effect that specifies slow start, then fast, then slow end)
Linear: Specifies the transition effect that starts at the same speed to the end
5. Transition-delay Properties
Specifies when the transition effect begins. The Transition-delay value is measured in seconds or milliseconds. The default value is 0.

Div
{
Transition-property:width;
Transition-duration:1s;
Transition-timing-function:linear;
Transition-delay:2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}
Shorthand Div
{
transition:width 1s linear 2s;
}
Second, CSS3 animation (animation, @keyframes, browser plus prefix, can add offset effect)
1. CSS3 @keyframes Rules:
@keyframes rules are used to create animations. By stipulating a CSS style in the @keyframes, you can create an animated effect that changes from the current style to the new style.
2. When creating an animation in a @keyframes, bundle it to a selector, otherwise it will not animate.
You can bind an animation to a selector by stipulating at least the following two CSS3 animation properties:
Specifies the name of the animation.
Specifies the length of the animation.
3, the "Myfirst" animation bundled to the div element, the duration: 5 seconds:

Div
{
Animation:myfirst 5s;
-moz-animation:myfirst 5s;/* Firefox * *
-webkit-animation:myfirst 5s;/* Safari and Chrome * *
-o-animation:myfirst 5s;/* Opera * *
}
4. Time
Animation is the effect of gradually changing an element from one style to another. Any number of styles can be changed any number of times. Use percentages to specify when changes occur, or to use the keyword "from" and "to", equivalent to 0% and 100%.
0% is the beginning of the animation, and 100% is the completion of the animation.
5. Animation-duration Properties
Defines the time, in seconds or milliseconds, that the animation will take to complete a cycle.
6, animation-timing-function specified the speed curve of the animation. Transition with CSS3
7. The Animation-delay property defines when the animation starts. Transition with CSS3
8. The Animation-iteration-count property defines the number of times the animation plays. N/infinite (unlimited playback)

CSS3 Transitions and animations