CSS3 animations apply animations and transtions transform with JavaScript to enable hardware-accelerated animations.

Transitions (Transition)

　　When applied to a property change specified by an element, the property undergoes a gradual transition over time to the value that is ultimately desired.

It consists of four attributes:

Properties for performing transformations: Transition-property
　　　　Time of transformation Continuation: Transition-duration
Rate change of transformation: transition-timing-function
Transform delay time: Transition-delay.

1.Transition-propery

Syntax: transition-property:none| All | [<ident>] [', ' <idebt>]*
Transition-property is used to specify that an attribute in the current element is changed when the transition is executed
effect, which has the following values: None (no property changes); All (change all properties) This is also its default value; indent (element attribute name)
When the value is none, Transiton stops execution immediately, and when specified as all, the element will perform a transition effect if any property changes occur
Ident is a property value that can be specified for an element.
1.color: Through the red, yellow, blue and transparency components such as: Background-color,border-color,color,outline-color CSS properties;
2.length real numbers. such as: Word-spacing,width,vertical-align,top,right,bottom,left,padding,
3.percentage: Real numbers, such as: Word-spacing,width,vertical-align,top,right,bottom,left,padding,
4.integer discrete steps (entire number), in real digital space, and when converting to integers using floor () such as: Outline-offset,z-index properties
5.number Real (floating-point) values, such as: Zoom,opacity,font-weight, and other properties.
6.transform List
7.rectangle: Transform by X,y,width and height (to numeric), e.g. crop
8.visibility: Discrete step, within the range of 0 to 1 digits, 0 for hide, 1 for full "display", e.g. visibility
9.shadow: Acting on Color,x,y, and Blur (Blur), such as Text-shadow
10.gradient; change by position and color at each stop.
11.paint Server (SVG): supports only the following scenarios: from gradient to gradient and from color to color, and then works like this
12.space-separated List of above: If the list has the same item value,
13.a Shorthand property: If all parts of an abbreviation can be animated, it will change as if all the individual attributes change

2.transition-duration:

Transition-duration: <time> [, <time>]*
Transition-duration is used to specify the element, the duration of the conversion process value:<time> to a number, in S (s) or MS (MS), can be used for all elements,
Includes: Before and: after pseudo-elements. The default value is 0, which means that the transformation is instantaneous.

3.transition-timing-function: The value allows you to change the conversion rate of the attribute value by the time of the advance to have 6 possible values.

1.ease: (slowly slowing) default value, ease function equals Bezier curve (0.25, 0.1, 0.25, 1.0)
2.linear (mean speed) linear function equals Bezier curve (0.0,0.0,1.0,1.0)
3.ease-in (acceleration), ease-in function equals monthly Bezier curve (0.42,0,1.0,1.0)
4.ease-out (deceleration), ease-out function equals Bezier curve (0,0,0.58.1,0)
5.ease-in-out (acceleration and deceleration), ease-in-out function equals Bezier curve (0.42,-,0.58,1.0)
6.cubic-bezier: (This value allows you to define a time curve), a specific cubic-bezier curve

4.Transition-delay

Transition-delay: <time> [, <time>]*
Transition-delay is used to specify the time at which an animation executes to begin execution, that is, how long it takes to execute transtion after changing the attribute value of an element
The value:<time> is a number, in S (s) or MS (MS), which is very similar in use to transition-duration and can be used for the
There are elements, including: Before and: after pseudo-elements. The default size is "0", that is, the transform executes immediately without delay.

String together several transition declarations, separated by commas (",").

Such as:
A
-moz-transition:background 0.5s ease-in,color 0.3s ease-out;
-webkit-transition:background 0.5s ease-in,color 0.3s ease-out;
-o-transition:background 0.5s ease-in,color 0.3s ease-out;
Transition:background 0.5s ease-in,color 0.3s ease-out;
}

Transition a shorthand method: Transition: <property> <duration> <animation type> <delay>
Such as:
p {
-webkit-transition:all. 5s ease-in-out 1s;
-o-transition:all. 5s ease-in-out 1s;
-moz-transition:all. 5s ease-in-out 1s;
transition:all. 5s ease-in-out 1s;
}

Since transition was first proposed by the WebKit kernel browser, prefixes are required to support popular types of browsers
Mozilla kernel-moz-transition:
WebKit kernel-webkit-transition:
Opera-o-transition:

Animation
Keyframes has its own grammatical rules, and his name starts with "@keyframes", followed by a bunch of curly braces.
For a style rule in a "@keyframes" is made up of multiple percentages, such as "0%" to "100%"
Grammar:
@keyframes IDENT {
from {
Properties:properties value;
}
Percentage {
Properties:properties value;
}
to {
Properties:properties value;
}
}

　　　　Or all written in percent form:
@keyframes IDENT {
0% {
Properties:properties value;
}
Percentage {
Properties:properties value;
}
100% {
Properties:properties value;
}
}

ident is an animated name that you can take, and of course semantically better,
@-webkit-keyframes ' wobble ' {
　　　　　　　　　　　　0% {
margin-left:100px;
Background:green; 　　　　　　　　　　　　
}
40% {
margin-left:150px;
Background:orange; 　　　　　　　　　　　　
}
60% {
margin-left:75px;
Background:blue; 　　　　　　　　　　　　
}
100% {
margin-left:100px;
background:red;
}
}

　　　　Element Call Animation Property
Such as:
. demo1 {
width:50px;
height:50px;
margin-left:100px;
Background:blue;
-webkit-animation-name: ' wobble ';/* animated property name, which is the name of the animation keyframes defined in front of us */
-webkit-animation-duration:10s;/* Animation Duration */
-webkit-animation-timing-function:ease-in-out; /* Animation frequency, and transition-timing-function is the same */
-webkit-animation-delay:2s;/* Animation delay Time */
-webkit-animation-iteration-count:10;/* Define circular data, infinite to infinite times */
-webkit-animation-direction:alternate;/* Define Animation Mode */
}

Property
　　　　　　1.animation-name:

Syntax: Animation-name:none | Ident[,none | ident]*;
Animation-name: is used to define the name of an animation, which has two main values: Ident is the name of the animation created by KeyFrames,
In other words, the ident here are consistent with the ident in KeyFrames,
If not, no animated effect will be achieved; none is the default and no animation effect occurs when the value is none. Besides, we have this
Transition as mentioned above, we can also attach a
Several animation give an element, we just need to separate it with a comma ",".
　　　　　　 2.animation-duratiuon
Syntax: animation-duration: <time>[,<time>]*
Animation-duration is used to specify the length of time that an element plays an animation, and the value:<time> is a number, in S (seconds). Its default value is "0".
This property is the same as the transition-duration used in transition.
　　　　　　 3.animation-timing-function:
Animation-timing-function: Refers to the element according to the time of the advance to change the property value of the transformation rate, the simple point is the way the animation play.
Like the transition-timing-function in transition, he has the following six ways of transformation: Ease;ease-in;ease-in-out;linear;cubic-bezier.
The specific use of the method you can click here to see how the use of transition-timing-function.
　　　　　　 4.animation-delay
Syntax: Animation-delay: <time>[,<time>]*
Animation-delay: is used to specify the element animation start time. The value is <time> as the value, in s (seconds), and the default value is 0.
This property is the same as the Transition-delayy use method.
　　　　　　 5.animation-iteration-count
Animation-iteration-count:infinite | <number> [, Infinite | <number>]*
Animation-iteration-count is used to specify the number of cycles that an element plays an animation, which can take a value of <number> as a number, with a default value of "1" and a infinite loop for an infinite number of times.
　　　　　　 6.animation-direction
Syntax: Animation-direction:normal | alternate [, Normal | alternate]*
Animation-direction is used to specify the direction in which an element animates, with only two values, the default value is normal, and if set to normal,
Each cycle of the animation is played forward;
Another value is alternate, whose effect is that the animation plays forward in an even number of times, and the odd number of times is played in the opposite direction.
　　　　　　 7.animation-play-state
Syntax: animation-play-state:running | Paused [, running | paused]*
Animation-play-state is primarily used to control the playback state of element animations. There are mainly two values, running and paused where running is the default value.
Their role is similar to our music player, you can stop the animation being played by paused, or you can replay the paused animation by running.
Our replay here doesn't have to be played from the beginning of the element animation, but from where you paused.

Transform
The letter is the deformation, the meaning of change, in the CSS3 transform mainly include a few, rotate rotate, twist skew, zoom scale and move translate
Matrix variants
Syntax: Transform:none | <transform-function> [<transform-function>]*
That is

Transform:rotate | Scale | Skew | Translate |matrix;

None means how to transform;<transform=function> represents one or more transform functions, separated by a space;
In other words, we have a variety of operations that transform an element at the same time, such as
Rotate,scale,translate three kinds, but we need to remind you that in the past, we have overlapping effects are separated by commas (","),
However, when you use multiple properties in transform, you need a space to separate them. We remember that it is a space-separated.

　　　　 1. Rotating rotate
Specifies a 2D rotation (2D rotation) of the original element with the specified angle parameter, preceded by the definition of the Transform-origin attribute.
Transform-origin defines the base point of the rotation, where angle refers to the angle of rotation,
If the value is set to a positive number for clockwise rotation, if the value is set to a negative number, the counter-clockwise rotation is indicated. such as: Transform:rotate (30deg):
　　　　 2. Mobile Translate
Moving the translate we are divided into three cases: translate (x, y) move horizontally and vertically (i.e. simultaneous movement of the axis and the y axis);
TranslateX (x) moves horizontally only (x-axis movement); Translatey (y) moves vertically (Y-axis movement)
　　　　 3. Scaling scale
Scaling scale and moving translate are extremely similar, and he also has three cases: scale (x, y) scales the elements horizontally and vertically
(i.e. the x-axis and y-axis are scaled simultaneously); ScaleX (x) elements are scaled horizontally (x-axis scaling) only;
The ScaleY (Y) elements scale only vertically (Y-axis scaling), but they have the same zoom center point and cardinality, whose center point is the central position of the element.
The scale cardinality is 1, and if its value is greater than 1, the value is less than 1 and the element shrinks.
　　　　 4. Twist Skew
Distort the skew and Translate,secale skew (x, y) to distort the elements in both horizontal and vertical directions (both x and Y axes are distorted at a certain angular value);
SKEWX (x) only distorts the element in the horizontal direction (distortion of the x-axis); Skewy (y) distorts the element in the vertical direction only (the y-axis distorts the deformation)
　　　　 5. Matrices Matrix
Matrix (<number>, <number>, <number>, <number>, <number>, <number>) with a value of six (a,b,c , d,e,f)
The form of a transformation matrix specifies a 2D transformation,
Equivalent to applying a [a B c D E F] transformation matrix directly. is to reposition the element based on the horizontal (x-axis) and vertical (Y-axis) direction.
　　　　 6. Change the base point of the element Transform-origin
His main function is to let us change the base point position of the element before we proceed with the transform action, because the default base point of our element is its central position,
In other words we did not use Transform-origin to change the position of the element base point,
Rotate,translate,scale,skew,matrix such as transform are changed at the center of the element's own location.

In the face of different browser cores
Mozilla Kernel Browser: firefox3.5+
-moz-transform-origin:x y;
WebKit Kernel Browser: Safari and Chrome
-webkit-transform-origin:x y;
Opera
-o-transform-origin:x y;
IE9
-ms-transform-origin:x y;
Standard

If the coordinate position changes:
　　　　1.transform:translate (x, y):
. menu ul li.translate a:hover {
-moz-transform:translate ( -10px,-10px);
-webkit-transform:translate ( -10px,-10px);
-o-transform:translate ( -10px,-10px);
-ms-transform:translate ( -10px, -10px);
Transform:translate ( -10px,-10px);
}

　　　　2.transform:translatex (x)

. menu ul li.translate-x a:hover {
-moz-transform:translatex ( -10px);
-webkit-transform:translatex ( -10px);
-o-transform:translatex ( -10px);
-ms-transform:translatex ( -10px);
Transform:translatex ( -10px);
}

　　　　3.transform:translatey (y)
. menu ul li.translate-y a:hover {
-moz-transform:translatey ( -10px);
-webkit-transform:translatey ( -10px);
-o-transform:translatey ( -10px);
-ms-transform:translatey ( -10px);
Transform:translatey ( -10px);
}

　　　4.transform:rotate (angle value)
. menu ul li.rotate a:hover {
-moz-transform:rotate (45DEG);
-webkit-transform:rotate (45DEG);
-o-transform:rotate (45DEG);
-ms-transform:rotate (45DEG);
Transform:rotate (45DEG);
}

　　5.transform:scale (x, y)
. menu ul Li.scale a:hover {
-moz-transform:scale (0.8,0.8);
-webkit-transform:scale (0.8,0.8);
-o-transform:scale (0.8,0.8);
-ms-transform:scale (0.8,0.8);
Transform:scale (0.8,0.8);
}

　　6.transform:scalex (x)
. menu ul li.scale-x a:hover {
-moz-transform:scalex (0.8);
-webkit-transform:scalex (0.8);
-o-transform:scalex (0.8);
-ms-transform:scalex (0.8);
Transform:scalex (0.8);
}

　　

　　7.transform:scaley (y)
. menu ul li.scale-y a:hover {
-moz-transform:scaley (1.2);
-webkit-transform:scaley (1.2);
-o-transform:scaley (1.2);
-ms-transform:scaley (1.2);
Transform:scaley (1.2);
}

　　8.transform:skew (x, y)

. menu ul Li.skew a:hover {
-moz-transform:skew (45DEG,15DEG);
-webkit-transform:skew (45DEG,15DEG);
-o-transform:skew (45DEG,15DEG);
-ms-transform:skew (45DEG,15DEG);
Transform:skew (45DEG,15DEG);
}

　　9.TRANSFORM:SKEWX (x)
. menu ul li.skew-x a:hover {
-moz-transform:skewx ( -30DEG);
-webkit-transform:skewx ( -30DEG);
-o-transform:skewx ( -30DEG);
-ms-transform:skewx ( -30DEG);
Transform:skewx ( -30DEG);
}
　　10.transform:skewy (y)
. menu ul li.skew-y a:hover {
-moz-transform:skewy (30DEG);
-webkit-transform:skewy (30DEG);
-o-transform:skewy (30DEG);
-ms-transform:skewy (30DEG);
Transform:skewy (30DEG);
}

　　11.transform:matrix (A,B,C,D,E,F)

. menu ul Li.matrix a:hover {
-moz-transform:matrix (1,1,-1,0,0,0);
-webkit-transform:matrix (1,1,-1,0,0,0);
-o-transform:matrix (1,1,-1,0,0,0);
-ms-transform:matrix (1,1,-1,0,0,0);
Transform:matrix (1,1,-1,0,0,0);
}

CSS3 animations apply animations and transtions transform with JavaScript to enable hardware-accelerated animations.