Basic usage of css3, which must be viewed by beginners (comparison between css3 and jquery animation)

Basic usage of css3, which must be viewed by beginners (comparison between css3 and jquery animation)

Step 1:

Define an animation. The name can be different, just like the method name.

1. Define an animation named fadeIn

@-Webkit-keyframes fadeIn {0% {opacity: 0;/* The initial State transparency is 0 */} 50% {opacity: 0; /* The intermediate state transparency is 0 */} 100% {opacity: 1;/* the Ending State transparency is 1 */}}

There are many other methods:

For example:

/* Define the css method, the name is disappear Hides a leaf towards the very end of the animation */@-webkit-keyframes fade {/* Show a leaf while into or below 95 percent of the animation and hide it, otherwise */0% {opacity: 1;}/* The initial State transparency is 1 */

95% {opacity: 1;}/* The intermediate state transparency is 1 */

100% {opacity: 0;}/* the transparency of the ending state is 0 */

}

/* The definition method is drop Makes a leaf fall from-300 to 600 pixels in the y-axis */
@-Webkit-keyframes drop
{
/* Move a leaf to-300 pixels in the y-axis at the start of the animation */
0% {-webkit-transform: translate (0px,-50px);}/* initial descent, set the element position, element x direction shift a, y direction shift B */
/* Move a leaf to 600 pixels in the y-axis at the end of the animation */
100% {-webkit-transform: translate (0px, 1136px);}/* set the position of the element at the end of the descent. The element x is shifted to a, and the element y is shifted to B */
}

/* Define a method called Rotates a leaf from-50 to 50 degrees in 2D space */
@-Webkit-keyframes clockwiseSpin
{

0% {-webkit-transform: rotate (-50deg );}

100% {-webkit-transform: rotate (50deg );}
}

/* Define a method called Flips a leaf and rotates it from 50 to-50 degrees in 2D space */
@-Webkit-keyframes counterclockwiseSpinAndFlip
{

0% {-webkit-transform: scale (-1, 1) rotate (50deg );}

100% {-webkit-transform: scale (-1, 1) rotate (-50deg );}
}

Step 2:

Is what to execute in the method, and the animation effect to be executed has several keywords: transform transition animation

The content in these methods should actually refer to this:

Transform

　　Rotate

Set the clockwise rotation angle of the element. Usage:

Transform: rotate (x );

The x parameter must be an angle number ending with deg or 0, which can be negative.

　　Scale

Set the magnification of an element. The usage includes:

Transform: scale (a); all elements x and y scale a Times

Transform: scale (a, B); element x scales a times, and y scales B times.

Transform: scaleX (a); the element x scales a times, and the y direction remains unchanged.

Transform: scaleY (B); the element is scaled B times in the y direction, and the x direction remains unchanged.

　　Translate

Sets the element displacement. Usage:

Transform: translate (a, B); element x direction displacement a, y direction displacement B

Transform: translateX (a); element x direction shift a, y direction unchanged

Transform: translateY (B); element y direction shift B, x direction unchanged

　　Skew

Sets the angle of element skew. The usage includes:

Transform: skew (a, B); element x direction: clockwise tilt angle a, y direction: clockwise tilt angle B

Transform: skewX (a); element x is clockwise skewed to angle a, and the y direction remains unchanged.

Transform: skewY (B); element y is skewed clockwise to angle B, and the orientation remains unchanged.

All the preceding parameters must end with deg or 0, which can represent a negative number.

　　Matrix

Set the element deformation matrix, because the matrix deformation is too complex, temporarily omitted.

　　Origin

Set the suspension point of an element. The usage includes:

Transform-origin: a B; the suspension point of the element is (a, B)

The suspension point of an element is the center point when it is rotated and skewed. The a and B values can be the length value, the percentage ending with %, or the left, top, right, and bottom values.

Transition

　　Transition-property

Specifies the CSS attribute for the effect of a transition. Its value is the CSS attribute name.

　　Transition-duration

The duration of the animation effect. Its value is the number of seconds ending with s.

　　Transition-timing-function

Specify the variable rate function of the element state. The value is based on the besell curve function. The details are as follows:

Transition-delay

The time when the animation effect starts to be postponed. Its value is the number of seconds ending with s.

Animation

In CSS3, the real animation attribute is animation, and the previous transform and transition are only deformation of the DOM element or transition of the State. In fact, the animation effect supported by CSS3 is only a filling animation, that is, to set several key states (key frame, key frame) in the entire animation lifecycle ), then, the animation automatically calculates and simulates the transition between key frames. You must set the key frame before setting the attribute of the animation.

The syntax structure of the Key Frame @ keyframes is as follows:

　　

　　@ KeyframesNAME {

　　A % {

　　/* CSS attributes */

　　}

　　B % {

　　/* CSS attributes */

　　}

　　...

　　}

NAME indicates the animation NAME; a %, B % indicates the percentage ending with a percent sign, used to set the position of the key frame in the animation lifecycle; in the {} following the percentage, the CSS attribute value in the key frame State needs to be written. In addition, if the same percentage value appears multiple times in @ keyframes, the later value will overwrite the first value, and the key frames will appear unordered in @ keyframes.

After setting the key frame, you can continue to set the animation.

　　Animation-name

Specifies the NAME of the selected animation, that is, the NAME in keyframes.

　　Animation-duration

The same as transition-duration.

　　Animation-timing-function

The same as transition-timing-function.

　　Animation-delay

The same as transition-delay.

　　Animation-iteration-count

Set the number of animation executions. The value can be a number or infinite ).

　　Animation-direction

Sets the animation execution direction. The value can be normal (normal sequence playback) or alternate (reverse playback ).

Prefix

Because CSS3 has not been officially released, various browsers have different support for it. Therefore, when setting the CSS3 attribute (including the new attribute starting with @), you usually need to add the browser ID prefix to it, such as-webkit-indicating Chrome and Safari of Webkit kernel browsers, -moz-Indicates Fire Fox, and-o-Indicates Opera. Ignore IE. in IE, filters are usually used instead of css3.

Step 3:

Finally, use the following code for the div element:

Add the following animation code to the ID or class:

# Box {-webkit-animation-name: fadeIn;/* animation name */-webkit-animation-duration: 3 s; /* animation duration */-webkit-animation-iteration-count: 1;/* Number of animations */-webkit-animation-delay: 0 s; /* Delay Time */}

The above code can be used to achieve the animation effect of Fade-in and fade-out. The specific meaning of the Code has been specified in the comment.

Case:

# LeafContainer> div
{
Position: absolute;
Width: 100px;
Height: 100px;

/* We use the following properties to apply the fade and drop animations to each leaf.
Each of these properties takes two values. These values respectively match a setting
For fade and drop.
*/

-Webkit-animation-name: fade, drop;/* animation name */

-Webkit-animation-iteration-count: infinite, infinite;
-Webkit-animation-direction: normal, normal;/* sets the animation execution direction. The value can be normal (normal sequence playback) or alternate (reverse playback )*/
-Webkit-animation-timing-function: linear, memory-in;/* variable rate function, which is based on the besell curve, which is a constant speed and accelerates */
}

# LeafContainer> div> img {
Position: absolute;
Width: 100px;
Height: 100px;

-Webkit-animation-name: fade, drop;/* animation name */
-Webkit-animation-iteration-count: infinite;/* set the number of animation executions. The value can be a number or infinite ). */
-Webkit-animation-direction: alternate;/* sets the animation execution direction. The value can be normal (normal sequence playback) or alternate (reverse playback )*/
-Webkit-animation-timing-function: Internal-in-out;/* variable rate function, which is based on the besell curve. This is acceleration and deceleration */
-Webkit-transform-origin: 50%-100%;/* the suspension point of the element is the center point when it is rotated and skewed. The a and B values can be the length value, the percentage ending with %, or the left, top, right, and bottom values. This is like a pendulum */
}

There are some reference codes:

The Code is as follows:

　　



CSS3 Animation

<P>
Rotate
Scale
Translate
Skew
Origin
Single property
Whole property
Change & resume
Animation

& Nbsp;

CSS code:

　　Animation.css

The Code is as follows:

Div {
Width: 80px;
Height: 30px;
Line-height: 30px;
Text-align: center;
Background: # 06F;
Color: # fff;
Font-family: Arial, Helvetica, sans-serif;
-Webkit-border-radius: 10px;
Margin: 5px;
}

<P>. rotate {
-Webkit-transform: rotate (0deg );
}

<P>. rotate: hover {
-Webkit-transform: rotate (90deg );
}

<P>. scale {
-Webkit-transform: scale (1 );
}

<P>. scale: hover {
-Webkit-transform: scale (1.5 );
}

<P>. translate {
-Webkit-transform: translate (0px, 0px );
}

<P>. translate: hover {
-Webkit-transform: translate (50px, 50px );
}

<P>. skew {
-Webkit-transform: skew (0 );
}

<P>. skew: hover {
-Webkit-transform: skewY (20deg );
}

<P>. origin {
-Webkit-transform-origin: top left;
-Webkit-transform: rotate (0 );
}

<P>. origin: hover {
-Webkit-transform: rotate (45deg );
}

<P>. single {
Width: 150px;
}

<P>. single: hover {
Background: # f00;
Width: 200px;
Height: 100px;
Line-height: 100px;
-Webkit-transition-property: background;
-Webkit-transition-duration: 2 s;
}

<P>. whole {
Width: 150px;
}

<P>. whole: hover {
Width: 200px;
Height: 100px;
Line-height: 100px;
Background: # f00;
-Webkit-transition-duration: 2 s;
}

<P>. resume {
Width: 150px;
-Webkit-transition-duration: 2 s;
}

<P>. resume: hover {
Width: 200px;
Height: 100px;
Line-height: 100px;
Background: # f00;
-Webkit-transition-duration: 2 s;
}

<P>. animation: hover {
-Webkit-animation-name: anim;
-Webkit-animation-duration: 2 s;
-Webkit-animation-timing-function: linear;
-Webkit-animation-direction: alternate;
-Webkit-animation-iteration-count: infinite;
}

<P> @-webkit-keyframes anim {
0% {
Width: 80px;
Height: 30px;
Line-height: 30px;
Background: # 06F;
}
50% {
Width: 140px;
Height: 65px;
Line-height: 65px;
Background: #360;
}
100% {
Width: 200px;
Height: 100px;
Line-height: 100px;
Background: # f00;
}
}

Comparison between CSS 3 animation and jquery Animation:

CSS3 animation provides interfaces for 2D, 3D, and conventional animation attributes. It can work on any attribute of any element on the page. CSS3 animation is written in C language, it is a system-level animation, so its efficiency is definitely higher than that simulated by js. Is that true?
After our tests, we found that CSS3 animation and javascript simulated animation have the following differences:


1 \ CSS 3D animation cannot be implemented in js;
CSS 3 3D animation is a very powerful function in CSS3, because it works in a three-dimensional space, so JavaScript cannot simulate 3D animation like CSS3, of course, whether this 3D animation has a wide range of practical application scenarios is worth thinking about ......

2 \ CSS 2D matrix animation is more efficient than js's matrix animation simulated by using margin, left, and top;
The 2D animation of CSS3 refers to the transformation of the 2D matrix, such as scaling, deformation, X axis, and Y axis. Of course, JavaScript cannot perform deformation animation. Taking coordinate animation as an example, after our test, we found that the translateXY animation using CSS3 transform is nearly 700 faster than the position left and position right in js! Moreover, it is visually smoother than js animation.

3 \ CSS3 the efficiency of other conventional animation attributes is lower than that of js simulation animations;
General animation attributes here refer to: height, width, opacity, border-width, color .....
We tested in Android HTC to change a DOM element from height: 0 to height: 100. We used the transition and animation of jQuery animate and CSS3, and the results showed: the tansition and animation of CSS3 are slower than jQuery animate 500! Other conventional animation properties are slower than jQuery animate 400-500 !.

The above are some simple tests we have performed on CSS3 and jQuery animations. We hope you can also list your test results in comments. Next let's take a look at animation events.

Every time an animation is executed on a page, there should be at least two events, animationStart and animationEnd, and some may also require animationDuration. We do not recommend animationDuration on mobile phones, so the efficiency is already very low, do not perform other events during animation execution.

To simulate animation with js, developers need to write the interfaces of these animation events to better perform the next step. CSS 3 animation does not require developers to write these event interfaces, and the browser has already provided them, take the webkit kernel browser as an example. It provides webkitTransitionStart, webkitTransitionEnd, webkitAnimationStart, webkitAnimationDuration, and webkitAnimationEnd event interfaces. developers can easily use these events.

Through the above discussion, we can find a result:
As for js animation or css3 animation, developers need to make different choices based on different needs. However, a basic principle should be followed:
Do not use transition or animation of CSS3 if you want to perform 2D animation.