The animations of css3 include animations and transtions transform, which can be added with JavaScript to accelerate hardware animation ., Css3transtions

The animations of css3 include animations and transtions transform, which can be added with JavaScript to accelerate hardware animation ., Css3transtions

Transitions)

　　When the attribute specified by the element changes, the attribute gradually transitions to the desired value after a period of time.

It mainly includes four attributes:

The property for performing the transformation: transition-property
Transition duration: transition-duration
Conversion Rate Change: transition-timing-function
Transformation delay Time: transition-delay.

1. transition-propery

Syntax: transition-property: none | all | [<IDENT>] [',' <IDEBT>] *
Transition-property is used to specify the transition when one of the attributes of the current element changes.
Effect, which has the following values: none (no attribute changes); all (all attributes changed), which is also the default value; indent (element attribute name)
When its value is none, transiton immediately stops execution. When it is set to all, the element will execute the transition effect when any attribute changes.
An ident is an attribute value that can be specified for an element,
1. color: css attributes such as background-color, border-color, color, and outline-color are changed through the red, yellow, blue, and transparency components;
2. The real number of length. For example, 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 step (the entire number), which occurs in the real numeric space and when floor () is used to convert to an integer, such as outline-offset and z-index.
5. Real (floating point) values of number, such as zoom, opacity, font-weight, and other attributes.
6. transform list
7. rectangle: converts the value through x, y, width, and height, such as crop.
8. visibility: discrete step. In the range of 0 to 1, 0 indicates hidden, and 1 indicates full "display", such as visibility.
9. shadow: applies to color, x, y, and blur, such as text-shadow.
10. gradient; the position and color of each stop change.
11. paint server (SVG): only supports the following situations: From gradient to gradient and color to color, and then works like above
12. space-separated list of above: if the list has the same project value,
13. a shorthand property: If all part of the abbreviation can be animated, it will change like all single attribute changes.

2. transition-duration:

Transition-duration: <time> [, <time>] *
Transition-duration is used to specify the elements. The duration of the conversion process is set to <time> A value, in seconds or milliseconds. It can act on all elements,
Includes: before AND: after pseudo elements. The default value is 0, that is, it is real-time during transformation.

3. transition-timing-function: the value of transition-timing-function allows you to calculate the conversion rate of the attribute value based on time. There are 6 possible values.

1. Slow: (gradually slow down) default value. The Lag Function is equivalent to the besell curve (0.25, 0.1, 0.25, 1.0)
2. The linear (average speed) linear function is equivalent to the besell curve (0.0, 0.0, 1.0, 1.0)
3. For acceleration, the nested-in function is equivalent to the monthly besell curve (0.42, 0, 1.0, 1.0)
4. Slow-out (deceleration). The slow-out function is equivalent to the besell curve (, 0)
5. Slow-in-out (acceleration and then deceleration). The slow-in-out function is equivalent to the besell curve (0.42,-, 0.58, 1.0)
6. cubic-besuppliers: (this value allows you to define a time curve). The specific cubic-besuppliers curve.

4. transition-delay

Transition-delay: <time> [, <time>] *
Transition-delay is used to specify the start time of an animation execution, that is, how long it will take to execute transtion after the element attribute value is changed
The value is <time> A value in seconds or milliseconds. The value is similar to the value of transition-duration.
There are elements, including: before AND: after pseudo elements. The default size is "0", that is, the conversion is executed immediately without delay.

Concatenate several transition statements and separate them with commas.

For example:
A {
-Moz-transition: background 0.5 s extract-in, color 0.3 s extract-out;
-Webkit-transition: background 0.5 s extract-in, color 0.3 s extract-out;
-O-transition: background 0.5 s extract-in, color 0.3 s extract-out;
Transition: background 0.5 s extract-in, color 0.3 s extract-out;
}

Transition a stenographer: transition: <property> <duration> <animation type> <delay>
For example:
P {
-Webkit-transition: all. 5 s bytes-in-out 1 s;
-O-transition: all. 5 s bytes-in-out 1 s;
-Moz-transition: all. 5 s bytes-in-out 1 s;
Transition: all. 5 s bytes-in-out 1 s;
}

Since transition was first proposed by the webkit kernel browser, a prefix is required to support popular browsers.
// Mozilla kernel-moz-transition:
// Webkit kernel-webkit-transition:
// Opera-o-transition:

Animation
Keyframes has its own syntax rules. Its name starts with "@ keyframes", followed by a pile of curly braces added to the name of the animation.
A style rule in "@ keyframes" consists of multiple percentages, for example, "0%" to "100% ".
Syntax:
@ Keyframes IDENT {
From {
Properties: Properties value;
}
Percentage {
Properties: Properties value;
}
To {
Properties: Properties value;
}
}

Or all are written as percentages:
@ Keyframes IDENT {
0% {
Properties: Properties value;
}
Percentage {
Properties: Properties value;
}
100% {
Properties: Properties value;
}
}

IDENT is an animation name. You can take it as needed. Of course, it is better to make the semantics,
@-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 calls the animation attribute
For example:
. Demo1 {
Width: 50px;
Height: 50px;
Margin-left: 100px;
Background: blue;
-Webkit-animation-name: 'wobble ';/* animation attribute name, which is the animation name defined by keyframes */
-Webkit-animation-duration: 10 s;/* animation duration */
-Webkit-animation-timing-function: animation-in-out;/* animation frequency, which is the same as transition-timing-function */
-Webkit-animation-delay: 2 s;/* animation delay time */
-Webkit-animation-iteration-count: 10;/* define cyclic data. infinite is an unlimited number of times */
-Webkit-animation-direction: alternate;/* define the animation Mode */
}

Attribute
1. animation-name:

Syntax: animation-name: none | IDENT [, none | IDENT] *;
Animation-name: used to define an animation name. It has two main values: IDENT is the animation name created by Keyframes,
In other words, the IDENT here must be consistent with the IDENT in Keyframes,
If they are not consistent, no animation effect will be achieved; none is the default value, and when the value is none, no animation effect will be achieved. In addition, we
Attributes are the same as the preceding transition.
Several animation elements are separated by commas.
2. animation-duratiuon
Syntax: animation-duration: <time> [, <time>] *
Animation-duration is used to specify the duration of an element playing an animation. The value <time> is a numerical value and the unit is s (seconds.). The default value is 0 ".
This attribute is used in the same way as the transition-duration in the transition.
3. animation-timing-function:
Animation-timing-function: This function is used to change the conversion rate of attribute values based on time advances of an element. Simply put, it is the playing mode of an animation.
Like the transition-timing-function in the transition, it has the following six transformation modes: transition, transition-in, transition-in-out, linear, and cubic-bezr.
You can click here to view the usage of transition-timing-function.
4. animation-delay
Syntax: animation-delay: <time> [, <time>] *
Animation-delay: Specifies the start time of an element animation. The value is <time> A value in seconds. The default value is 0.
This attribute is the same as the usage of transition-delayy.
5. animation-iteration-count
Animation-iteration-count: infinite | <number> [, infinite | <number>] *
Animation-iteration-count is used to specify the number of cycles for an element to play an animation. Its value <number> is a number, and its default value is "1". infinite is an infinite number of cycles.
6. animation-direction
Syntax: animation-direction: normal | alternate [, normal | alternate] *
Animation-direction is used to specify the playback direction of an element animation. It has only two values. The default value is normal. If it is set to normal,
Each loop of an animation is played forward;
The other value is alternate. The function is to play the animation forward for the nth even time, and play the odd number in the reverse direction.
7. animation-play-state
Syntax: animation-play-state: running | paused [, running | paused] *
Animation-play-state is mainly used to control the playback status of element animations. There are two main values: running and paused. running is the default value.
They play the same role as our music player. You can use paused to stop the playing animation or play the paused animation again through running,
Replaying here does not necessarily start from the element animation, but from the position where you paused.

 

Transform
In css3, transform mainly includes the following types: rotating rotate, twisting skew, scaling scale, and moving translate.
And matrix deformation matrix
Syntax: transform: none | <transform-function> [<transform-function>] *
That is:

Transform: rotate | scale | skew | translate | matrix;

None indicates how to transform without entering; <transform = function> indicates one or more transformation functions separated by spaces;
In other words, we perform multiple operations on an element at the same time, such
Rotate, scale, and translate, but we need to remind you that in the past, the overlay effects were separated by commas,
However, multiple attributes in the transform must be separated by spaces. We remember that they are separated by spaces.

1. rotate
Specify a 2D rotation (2D rotation) for the original element using the specified angle parameter. The transform-origin attribute must be defined first.
Transform-origin defines the basis point of rotation, where angle refers to the rotation angle,
If the set value is positive, it indicates clockwise rotation. If the set value is negative, it indicates clockwise rotation. For example: transform: rotate (30deg ):
2. Move the translate
Moving translate can be divided into three situations: horizontal and vertical directions of translate (x, y) move at the same time (that is, the x axis and y axis move at the same time );
TranslateX (x) moves horizontally only (x axis); translateY (Y) moves vertically only (Y axis moves)
3. scale
Scaling scale is very similar to moving translate, and it has three situations: scale (x, y) enables horizontal and vertical scaling of elements at the same time
(That is, zooming both the x axis and the Y axis); scaleX (x) only scales horizontally (zooming the x axis );
ScaleY (y) elements only scale vertically (y-axis), but they share the same center and base, and their center is the center of the element,
The zoom base is 1. If the value is greater than 1, the zoom in is displayed. If the value is smaller than 1, the zoom in is displayed.
4. Twist skew
Twisting skew and translate, secale skew (x, y) causes the element to twist horizontally and vertically (the x and y axes are distorted at a certain angle );
SkewX (x) only causes horizontal distortion of elements (x axis distortion); skewY (y) only causes vertical distortion of elements (y axis distortion)
5. matrix
Matrix (<number >,< number>, d, e, f)
Specify a 2D transformation in the form of a transformation matrix,
It is equivalent to directly applying a [a B c d e f] transformation matrix. It is to reposition the element based on the horizontal direction (X axis) and vertical direction (Y axis,
6. Change the base point of the element transform-origin
His main function is to let us change the base point position of an element before performing the transform action, because the default base point of an element is its center position,
In other words, if we do not use transform-origin to change the base point position of an element,
Transform's rotate, translate, scale, skew, matrix and other operations all change with the element's own central position.

For different browsers
// 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;
// W3C 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 );
-Webkit-transform: matrix );
-O-transform: matrix );
-Ms-transform: matrix );
Transform: matrix );
}