Basic usage of CSS3, novice must-see ha (and CSS3 and jquery animations in contrast)

The first step:

Define animations, names can be different, just like method names

1. Define the animation, named Fadein

@-webkit-keyframes fadeIn {0% {opacity: 0; /*初始状态 透明度为0*/}50% {opacity: 0; /*中间状态 透明度为0*/}100% {opacity: 1; /*结尾状态 透明度为1*/}}

方法里面还有很多写法：

如：

/* 定义css方法，名字叫消失 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; } /*初始状态 透明度为1*/

    95%  { opacity: 1; }/*中间状态 透明度为1*/

    100% { opacity: 0; }/*结尾状态 透明度为0*/

}

/* Define method called Descent makes a leaf fall from-300 to 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);} /* Drop initial, set element position, element x direction displacement A,y direction shift B */
/* Move a leaf to pixels in the y-axis at the end of the animation */
100% {-webkit-transform:translate (0px, 1136px);} /* At the end of the drop, set the element's position, element x direction displacement A,y direction shift B */
}

/* Define a method called clockwise rotates a leaf from-50 to degrees in 2D space */
@-webkit-keyframes ClockwiseSpin
{

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

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

/* Define a method called counterclockwise flips a leaf and rotates it from the 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 Two:

Is the method inside to perform what, the animation effect has several keywords: transform transition animation

The contents of these methods, in fact, should refer to this:

Transform

　　Rotate

Sets the angle at which elements are rotated clockwise, using:

Transform:rotate (x);

The parameter x must be the number of angles ending with deg or 0, which can be reversed for negative numbers.

　　Scale

To set the multiple of an element to zoom in or out, usage includes:

Transform:scale (a); Both the element x and the y direction are scaled a Times

Transform:scale (A, b); The element x is scaled by a times, and the y direction is scaled b

Transform:scalex (a); element x direction Scale a times, y direction unchanged

Transform:scaley (b); The element y is scaled B, and the x direction is unchanged.

　　Translate

To set the displacement of an element, use:

Transform:translate (A, b); element x Direction displacement A,y direction shift B

Transform:translatex (a); element x Direction displacement A,y direction unchanged

Transform:translatey (b); Element y-Direction displacement b,x direction unchanged

　　Skew

To set the angle of an element's tilt, usage includes:

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

Transform:skewx (a); element x direction counterclockwise tilt angle a,y direction unchanged

Transform:skewy (b); Element y direction Clockwise tilt angle B, want direction unchanged

All of the above parameters must be the number of angles ending with deg or 0, which can be reversed for negative numbers.

　　Matrix

Sets the deformation matrix of the element because the matrix deformation is too complex to be temporary.

　　Origin

To set the hanging point of an element, usage includes:

Transform-origin:a b; The hanging point of the element is (a, B)

The hanging point of an element is the center point at which it rotates and tilts. A, B in the value can be a length value, a percentage ending in%, or a left, top, right, bottom four value.

Transition

　　Transition-property

Specifies the CSS property whose value is the CSS property name that the transition effect works on.

　　Transition-duration

The duration of the animation effect, whose value is the number of seconds ending in S.

　　Transition-timing-function

Specifies the rate of change function for the state of the element, based on the Bezier function, as shown in the details below:

Transition-delay

The time at which the animation effect defers execution and its value is the number of seconds ending in S.

Animation

The real animated properties in CSS3 are animation, whereas the front transform and transition are just transitions to the DOM element or state. In fact, the animated effect supported by CSS3 is just a fill animation, which means setting a few key states (key frame, keyframe) for the entire animation life cycle, and then animating and simulating transitions between keyframes. Then you must set the keyframe before setting the properties of the animation.

The syntax structure for Keyframe @keyframes is as follows:

　　

　　@keyframesNAME {

　　a% {

　　/*CSS Properties */

　　}

　　b% {

　　/*CSS Properties */

　　}

　　...

　　}

The name denotes the animation, and a%, b% represents a percentage ending in percent, which sets the position of the keyframe in the animation life cycle, and the {} after the percentage is written as the value of the CSS property in that Keyframe state. In addition, if the same percentage value occurs more than once in @keyframes, then the next occurrence overrides the first occurrence, and the keyframe is unordered in @keyframes.

After setting the keyframe, you can continue to set the animation.

　　Animation-name

Specifies the name of the selected animation, that is, name in KeyFrames.

　　Animation-duration

With Transition-duration.

　　Animation-timing-function

With Transition-timing-function.

　　Animation-delay

With Transition-delay.

　　Animation-iteration-count

Sets the number of times the animation executes, which can be either a number or a infinite (loop execution).

　　Animation-direction

Sets the direction in which the animation executes, with the values either normal (normally played) or alternate (reverse playback).

prefix

Because CSS3 has not yet been officially released, various browsers support it differently. So when you set the CSS3 property (including the new attribute at the beginning of the @), you usually need to prefix it with a browser identifier, such as-webkit-, which represents the WebKit kernel's browser chrome and safari,-moz-indicate that fire fox,-o-represents opera. Ignoring IE, the implementation on IE usually uses filters instead of CSS3.

Step Three:

Finally, use the DIV element as follows:

Add the following animation code to the ID or class

#box{-webkit-animation-name: fadeIn; /*动画名称*/-webkit-animation-duration: 3s; /*动画持续时间*/-webkit-animation-iteration-count: 1; /*动画次数*/-webkit-animation-delay: 0s; /*延迟时间*/}

The above code allows for a fade-out animation effect, and the specific meaning of the code is noted in the note.

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 the values. These values respectively match a setting
For fade and drop.
*/

-webkit-animation-name:fade, drop; /* Animated Name */

-webkit-animation-iteration-count:infinite, Infinite;
-webkit-animation-direction:normal, normal;/* sets the direction in which the animation will be executed, with a value of normal (play normally) or alternate (reverse playback) */
-webkit-animation-timing-function:linear, ease-in;/* change rate function, take Bezier curve, this is constant speed, acceleration */
}

#leafContainer > Div > img {
Position:absolute;
width:100px;
height:100px;

-webkit-animation-name:fade, drop; /* Animated Name */
-webkit-animation-iteration-count:infinite;/* sets the number of times the animation executes, either a number or a infinite (loop execution). */
-webkit-animation-direction:alternate;/* sets the direction in which the animation executes, with the values either normal (played normally) or alternate (reverse play) */
-webkit-animation-timing-function:ease-in-out; /* change rate function, take Bezier curve, this is acceleration and deceleration */
The-webkit-transform-origin:50% of the -100%;/* element is the center point at which it rotates and tilts. A, B in the value can be a length value, a percentage ending in%, or a left, top, right, bottom four value. It's like a pendulum.
}

There are some reference codes:

The code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" ">
<meta http-equiv= "Content-type" content= "text/HTML; Charset=utf-8 "/>
&LT;TITLE&GT;CSS3 Animation </title>
<linktype= "Text/css" rel= "stylesheet"/>
</Head></p>< p><body>
<div class= "Rotate" >rotate</div>
<div class= "scale" >scale</div>
<div class= "Translate" >translate</div>
<div class= "Skew" >skew</div>
<div Class= "origin" >origin</div>
<div class= "single" >single property</div>
<div class= "whole" >whole property</div>
<div class= "Resume" >change & resume</div>
<div class= "Animation" >animation</div>
</body>
</HTML>&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>< P>.rotate {
-webkit-transform:rotate (0DEG);
}</p>< P>.rotate:hover {
-webkit-transform:rotate (90DEG);
}</p>< P>.scale {
-webkit-transform:scale (1);
}</p>< P>.scale:hover {
-webkit-transform:scale (1.5);
}</p>< P>.translate {
-webkit-transform:translate (0px, 0px);
}</p>< P>.translate:hover {
-webkit-transform:translate (50px, 50px);
}</p>< P>.skew {
-webkit-transform:skew (0);
}</p>< P>.skew:hover {
-webkit-transform:skewy (20DEG);
}</p>< P>.origin {
-webkit-transform-origin:top left;
-webkit-transform:rotate (0);
}</p>< P>.origin:hover {
-webkit-transform:rotate (45DEG);
}</p>< P>.single {
width:150px;
}</p>< P>.single:hover {
Background: #f00;
width:200px;
height:100px;
line-height:100px;
-webkit-transition-property:background;
-webkit-transition-duration:2s;
}</p>< P>.whole {
width:150px;
}</p>< P>.whole:hover {
width:200px;
height:100px;
line-height:100px;
Background: #f00;
-webkit-transition-duration:2s;
}</p>< P>.resume {
width:150px;
-webkit-transition-duration:2s;
}</p>< P>.resume:hover {
width:200px;
height:100px;
line-height:100px;
Background: #f00;
-webkit-transition-duration:2s;
}</p>< P>.animation:hover {
-webkit-animation-name:anim;
-webkit-animation-duration:2s;
-webkit-animation-timing-function:linear;
-webkit-animation-direction:alternate;
-webkit-animation-iteration-count:infinite;
}</p>< 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;
}
}

Compare the pros and cons of CSS3 animations with jquery:

CSS3 Animation provides 2D and 3D as well as general animation properties interface, it can work on any one of the elements of the page properties, CSS3 animation is written in C language, it is the system level of animation, so its efficiency is absolutely higher than the animation of JS simulation, really is this it?
After our tests, we found that CSS3 animations have the following differences from JavaScript simulation animations:


1\css 3D Animation can not be realized in JS;
CSS3 3D Animation is a very powerful function in CSS3, because it works in a three-dimensional space, so JS is unable to simulate a 3D animation like CSS3, of course, the actual application of the 3D animation is very wide, worth thinking about ...

2\css 2D Matrix animation efficiency is higher than JS using margin and left,top simulation matrix animation;
CSS3 2D animation refers to 2D matrix transform changes, such as scaling \ Deformation \x axis \y axis, JS of course, can not do deformation animation. Take the coordinate animation, after our test found that the use of CSS3 transform do translatexy animation than JS position left,position right faster near 700mm! and more visually more fluent than JS animation.

3\CSS3 The efficiency of other normal animation properties is lower than the animation of JS simulation;
The general animation properties 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, and we used jquery animate and CSS3 transition and animation, The results show that both tansition and animation of CSS3 are slower than jquery animate 500mm! Other normal animation properties are slower than jquery animate 400-500mm!.

These are some of the simple tests we've done on CSS3 animations and jquery animations, and we hope you'll also be able to list your test results in the comments. Let's take a look at the animated event.

Every time you perform an animation on a page, you should have at least two events Animationstart and animationend Some may also need animationduration, we do not recommend animationduration on the phone, The efficiency is already very low, try not to do other events during the animation execution.

With JS simulation animation, developers need to write these animated events interface, in order to better do the next work, and CSS3 animation does not require developers to write these event interfaces, the browser itself has been provided, take WebKit kernel browser example, It provides the webkittransitionstart,webkittransitionend,webkitanimationstart,webkitanimationduration, Webkitanimationend event interface, developers can easily use these events.

We can find a result from the above discussion:
As for the use of JS animation or CSS3 animation, developers need to make different choices according to different needs, but should follow a basic principle is:
If you need to do 2D animation, do not use CSS3 's transition or animation.



CSS3 basic usage, novice must see Kazakhstan (also CSS3 and jquery animation contrast)