Step one:

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

1. Define the animation, The name is fadeIn

@-webkit-keyframes fadeIn {0% {opacity: 0; /*初始狀態(tài) 透明度為0*/}50% {opacity: 0; /*中間狀態(tài) 透明度為0*/}100% {opacity: 1; /*結(jié)尾狀態(tài) 透明度為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; } /*初始狀態(tài) 透明度為1*/

??? 95%? { opacity: 1; }/*中間狀態(tài) 透明度為1*/

??? 100% { opacity: 0; }/*結(jié)尾狀態(tài) 透明度為0*/

}

/ * The definition method is called 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 drop, set the position of the element, the element's x-direction displacement a, y-direction displacement b */
/* Move a leaf to 600 pixels in the y-axis at the end of the animation */
100% { -webkit-transform: translate(0px, 1136px); }/* descending At the end, set the position of the element, the element's x-direction displacement a, y-direction displacement b */
}

/* Define a method called clockwise 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 counterclockwise 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); }
}

th Step 2:

is what is to be executed in the method. There are several keywords for the animation effect: transform transition animation

In fact, the content in these methods must refer to this:

transform

　

rotate

Set the angle of clockwise rotation of the element. The usage is:

transform: rotate(x );

The parameter x must be an angle number ending with deg or 0, and can be a negative number to indicate reverse direction.

　

scale

Set the magnification or reduction factor of the element. Usage includes:

transform: scale(a); The element is scaled in both x and y directions a times

transform: scale(a, b); The element is scaled a times in the x direction and b times in the y direction

transform: scaleX(a); The element is scaled a times in the x direction, y The direction remains unchanged

transform: scaleY(b); The element is scaled b times in the y direction, and the x direction remains unchanged

translate

Set the displacement of the element , the usage is:

transform: translate(a, b); Unchanged

transform: translateY(b); The element is displaced b in the y direction, and the x direction remains unchanged

skew

Set the tilt angle of the element, Usage includes: transform: skew(a, b); The element's x direction is tilted counterclockwise by angle a, and the y direction is tilted clockwise by angle b

transform: skewX(a); The counterclockwise tilt angle a, the y direction remains unchanged

transform: skewY(b); The ending angle number or 0, can be negative to indicate reverse direction.

　

matrix

Set the deformation matrix of the element, because the matrix deformation is too complicated, so we will omit it for now.

　origin

Set the hanging point of the 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 of its rotation and tilt. A and b in the value can be a length value, a percentage ending with %, or the four values ??of left, top, right, and bottom.

transition

　　transition-property

　　指定transition效果作用的CSS屬性，其值是CSS屬性名。

　　transition-duration

　　動(dòng)畫效果持續(xù)的時(shí)間，其值為以s結(jié)尾的秒數(shù)。

　　transition-timing-function

　　指定元素狀態(tài)的變化速率函數(shù)，其取值基于貝賽爾曲線函數(shù)，詳情如下所示：

transition-delay

　　動(dòng)畫效果推遲開(kāi)始執(zhí)行的時(shí)間，其值為以s結(jié)尾的秒數(shù)。

animation

　　CSS3中真正的動(dòng)畫屬性是animation，而前面的transform和transition都只是對(duì)DOM元素的變形或者是狀態(tài)的過(guò)渡。實(shí)際上，CSS3所支持的動(dòng)畫效果只是填充動(dòng)畫，也就是說(shuō)先設(shè)定整個(gè)動(dòng)畫生命周期中的幾個(gè)關(guān)鍵狀態(tài)（key ?frame，關(guān)鍵幀），然后動(dòng)畫將自行計(jì)算并模擬關(guān)鍵幀之間的過(guò)渡。那么在設(shè)置animation的屬性之前就必須先設(shè)定好關(guān)鍵幀了。

　　關(guān)鍵幀@keyframes的語(yǔ)法結(jié)構(gòu)如下：

　　

　　@keyframesNAME {

　　a% {

　　/*CSS屬性*/

　　}

　　b% {

　　/*CSS屬性*/

　　}

　　...

　　}

　　NAME表示動(dòng)畫的名字；a%、b%表示以百分號(hào)結(jié)尾的百分?jǐn)?shù)，用于設(shè)定該關(guān)鍵幀在動(dòng)畫生命周期中的位置；百分?jǐn)?shù)后面的{ } 中則需要寫成該關(guān)鍵幀狀態(tài)下CSS屬性的值。另外，如果同一個(gè)百分?jǐn)?shù)值在@keyframes中出現(xiàn)多次，那么后出現(xiàn)的將覆蓋先出現(xiàn)的；并且關(guān)鍵幀在@keyframes中時(shí)無(wú)序的。

　　設(shè)置完關(guān)鍵幀后就可以繼續(xù)設(shè)定animation了。

　　animation-name

　　指定選用的動(dòng)畫的名字，即keyframes中的NAME。

　　animation-duration

　　同transition-duration。

　　animation-timing-function

　　同transition-timing-function。

　　animation-delay

　　同transition-delay。

　　animation-iteration-count

　　設(shè)定動(dòng)畫執(zhí)行的次數(shù)，其值可以是數(shù)字也可以是infinite（循環(huán)執(zhí)行）。

　　animation-direction

　　設(shè)定動(dòng)畫執(zhí)行的方向，其值可以是normal（正常順序播放）或alternate（反向播放）。

前綴

　　因?yàn)镃SS3還沒(méi)有正式發(fā)布，所以各種瀏覽器對(duì)它的支持也不盡相同。所以在設(shè)置CSS3屬性（包括@開(kāi)頭的新屬性）的時(shí)候通常需要對(duì)其添加瀏覽器標(biāo)識(shí)的前綴，如-webkit- 表示W(wǎng)ebkit內(nèi)核的瀏覽器Chrome和Safari，-moz- 表示Fire Fox，-o- 表示Opera。無(wú)視IE吧，在IE上的實(shí)現(xiàn)通常還是要用到濾鏡，而不是CSS3。

第三步：

最后，要給div元素用上：如下

在ID或類中增加如下的動(dòng)畫代碼

#box{-webkit-animation-name: fadeIn; /*動(dòng)畫名稱*/-webkit-animation-duration: 3s; /*動(dòng)畫持續(xù)時(shí)間*/-webkit-animation-iteration-count: 1; /*動(dòng)畫次數(shù)*/-webkit-animation-delay: 0s; /*延遲時(shí)間*/}

通過(guò)上面的代碼即可實(shí)現(xiàn)淡入淡出的動(dòng)畫效果，代碼具體的含義已在注釋中注明。

案例：

#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; /*動(dòng)畫名稱*/

??? -webkit-animation-iteration-count: infinite, infinite;
??? -webkit-animation-direction: normal, normal;/* 設(shè)定動(dòng)畫執(zhí)行的方向，其值可以是normal（正常順序播放）或alternate（反向播放） */
??? -webkit-animation-timing-function: linear, ease-in;/* 變化速率函數(shù)，取的是貝塞爾曲線，這個(gè)是勻速，加速 */
}

#leafContainer > div > img {
???? position: absolute;
???? width: 100px;
???? height: 100px;

????

-webkit-animation-name: fade, drop; /*動(dòng)畫名稱*/
???? -webkit-animation-iteration-count: infinite;/* 設(shè)定動(dòng)畫執(zhí)行的次數(shù)，其值可以是數(shù)字也可以是infinite（循環(huán)執(zhí)行）。 */
???? -webkit-animation-direction: alternate;/* 設(shè)定動(dòng)畫執(zhí)行的方向，其值可以是normal（正常順序播放）或alternate（反向播放） */
???? -webkit-animation-timing-function: ease-in-out; /* 變化速率函數(shù)，取的是貝塞爾曲線，這個(gè)是加速再減速 */
???? -webkit-transform-origin: 50% -100%;/* 元素的懸掛點(diǎn)即為它旋轉(zhuǎn)和傾斜時(shí)的中心點(diǎn)。取值中的a、b可以是長(zhǎng)度值、以%結(jié)尾的百分比或者left、top、right、bottom四個(gè)值。這里像個(gè)鐘擺 */
}

有一些參考代碼：

代碼如下:

　　

< p>










?

CSS代碼：

　　animation.css

　　代碼如下:

　　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: 2s;
}

< p>.whole {
width: 150px;
}

< p>.whole:hover {
width: 200px;
height: 100px;
line-height: 100px;
background: #f00;
-webkit-transition-duration: 2s;
}

< p>.resume {
width: 150px;
-webkit-transition-duration: 2s;
}

< p>.resume:hover {
width: 200px;
height: 100px;
line-height: 100px;
background: #f00;
-webkit-transition-duration: 2s;
}

< 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>@-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;
}
}

關(guān)于css3動(dòng)畫和jquery的動(dòng)畫的優(yōu)劣對(duì)比：

CSS3 animation provides 2D, 3D and conventional animation attribute interfaces. 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 it The efficiency is definitely higher than the animation simulated by js. Is this really the case?
After our testing, we found that there are the following differences between CSS3 animation and javascript simulation animation:


1＼ CSS 3D animation cannot be realized in js;
3D of CSS3 Animation is a very powerful function in CSS3, because it works in a three-dimensional space, so js 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＼ The CSS 2D matrix animation is more efficient than the matrix animation simulated by js using margin and left, top;
The 2D animation of CSS3 refers to the 2D matrix Transform change, such as Scaling\deformation\x-axis\y-axis, of course js cannot do deformation animation. Take coordinate animation as an example. After our testing, we found that using CSS3 transform to do translateXY animation is nearly 700mm faster than position left and position right in js! And it is also much smoother visually than js animation.

3＼ The efficiency of other regular animation properties of CSS3 is lower than the animation simulated by js;
Regular animation properties here refer to: height, width, opacity, border-width, color…..
We once tested changing a DOM element from height:0 to height:100 in Android HTC. We used jQuery animate and CSS3 transition and animation. The results showed that CSS3 tansition and animation were both slow. In jQuery animate 500mm! Other regular animation properties are 400-500mm slower than jQuery animate!.

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

Every time an animation is executed on the page, there should be at least two events animationStart and animationEnd. Some may also require animationDuration. We do not recommend animationDuration on mobile phones. The efficiency is already very low. Try not to Other events are also performed during the execution of the animation.

Using js to simulate animation requires developers to write interfaces for these animation events in order to better do the next step, while CSS3 animation does not require developers to write these event interfaces, the browser itself has already provided them Take webkit-based browsers as an example. It provides webkitTransitionStart, webkitTransitionEnd, webkitAnimationStart, webkitAnimationDuration, and webkitAnimationEnd event interfaces. Developers can use these events very conveniently.

Through the above discussion we can find a result:
As for whether to use js animation or css3 animation, developers need to make different choices based on different needs, but a basic principle should be followed:
If you need to do 2D animation, do not necessarily use CSS3 transition or animation.

??

??