css3的基礎用法，新手必看哈（還有css3和jquery動畫的對比）

第1步：

定義動畫，名字可以各種起，就像方法名1樣

1. 定義動畫，名稱為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*/

}

/*  定義方法叫降落 Makes a leaf fall from ⑶00 to 600 pixels in the y-axis */
@-webkit-keyframes drop
{
    /* Move a leaf to ⑶00 pixels in the y-axis at the start of the animation */
    0%   { -webkit-transform: translate(0px, ⑸0px); }/* 降落的初始，設置元素的位置，元素x方向位移a，y方向位移b */
    /* Move a leaf to 600 pixels in the y-axis at the end of the animation */
    100% { -webkit-transform: translate(0px, 1136px); }/* 降落的結束時，設置元素的位置，元素x方向位移a，y方向位移b */
}

/* 定義1個方法叫順時針 Rotates a leaf from ⑸0 to 50 degrees in 2D space */
@-webkit-keyframes clockwiseSpin
{
   
    0%   { -webkit-transform: rotate(⑸0deg); }
    
    100% { -webkit-transform: rotate(50deg); }
}

/* 定義1個方法叫逆時針 Flips a leaf and rotates it from 50 to ⑸0 degrees in 2D space */
@-webkit-keyframes counterclockwiseSpinAndFlip
{
    
    0%   { -webkit-transform: scale(⑴, 1) rotate(50deg); }
    
    100% { -webkit-transform: scale(⑴, 1) rotate(⑸0deg); }
}

第2步：

是方法里面要履行甚么，履行的動畫效果有幾個關鍵詞：transform   transition   animation

這些方法里面的內容，實際上都要參考這個：

transform

　　rotate

　　設置元素順時針旋轉的角度，用法是：

　　transform: rotate(x);

　　參數x必須是以deg結尾的角度數或0，可為負數表示反向。

　　scale

　　設置元素放大或縮小的倍數，用法包括：

　　transform: scale(a);                  元素x和y方向均縮放a倍

　　transform: scale(a, b);              元素x方向縮放a倍，y方向縮放b倍

　　transform: scaleX(a);                元素x方向縮放a倍，y方向不變

　　transform: scaleY(b);                元素y方向縮放b倍，x方向不變

　　translate

　　設置元素的位移，用法為：

　　transform: translate(a, b);                元素x方向位移a，y方向位移b

　　transform: translateX(a);                  元素x方向位移a，y方向不變

　　transform: translateY(b);                  元素y方向位移b，x方向不變

　　skew

　　設置元素傾斜的角度，用法包括：

　　transform: skew(a, b);              元素x方向逆時針傾斜角度a，y方向順時針傾斜角度b

　　transform: skewX(a);                元素x方向逆時針傾斜角度a，y方向不變

　　transform: skewY(b);                元素y方向順時針傾斜角度b，想方向不變

　　以上的參數均必須是以deg結尾的角度數或0，可為負數表示反向。

　　matrix

　　設置元素的變形矩陣，由于矩陣變形過于復雜，暫略。

　　origin

　　設置元素的懸掛點，用法包括：

　　transform-origin: a b;                元素的懸掛點為(a, b)

　　元素的懸掛點即為它旋轉和傾斜時的中心點。取值中的a、b可以是長度值、以%結尾的百分比或left、top、right、bottom4個值。

transition

　　transition-property

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

　　transition-duration

　　動畫效果延續的時間，其值為以s結尾的秒數。

　　transition-timing-function

　　指定元素狀態的變化速率函數，其取值基于貝賽爾曲線函數，詳情以下所示：

transition-delay

　　動畫效果推延開始履行的時間，其值為以s結尾的秒數。

animation

　　CSS3中真實的動畫屬性是animation，而前面的transform和transition都只是對DOM元素的變形或是狀態的過渡。實際上，CSS3所支持的動畫效果只是填充動畫，也就是說先設定全部動畫生命周期中的幾個關鍵狀態（key  frame，關鍵幀），然后動畫將自行計算并摹擬關鍵幀之間的過渡。那末在設置animation的屬性之前就必須先設定好關鍵幀了。

　　關鍵幀@keyframes的語法結構以下：

　　@keyframesNAME {

　　a% {

　　/*CSS屬性*/

　　}

　　b% {

　　/*CSS屬性*/

　　}

　　...

　　}

　　NAME表示動畫的名字；a%、b%表示以百分號結尾的百分數，用于設定該關鍵幀在動畫生命周期中的位置；百分數后面的{ } 中則需要寫成該關鍵幀狀態下CSS屬性的值。另外，如果同1個百分數值在@keyframes中出現屢次，那末后出現的將覆蓋先出現的；并且關鍵幀在@keyframes中時無序的。

　　設置完關鍵幀后就能夠繼續設定animation了。

　　animation-name

　　指定選用的動畫的名字，即keyframes中的NAME。

　　animation-duration

　　同transition-duration。

　　animation-timing-function

　　同transition-timing-function。

　　animation-delay

　　同transition-delay。

　　animation-iteration-count

　　設定動畫履行的次數，其值可以是數字也能夠是infinite（循環履行）。

　　animation-direction

　　設定動畫履行的方向，其值可以是normal（正常順序播放）或alternate（反向播放）。

前綴

　　由于CSS3還沒有正式發布，所以各種閱讀器對它的支持也不盡相同。所以在設置CSS3屬性（包括@開頭的新屬性）的時候通常需要對其添加閱讀器標識的前綴，如-webkit- 表示Webkit內核的閱讀器Chrome和Safari，-moz- 表示Fire Fox，-o- 表示Opera。疏忽IE吧，在IE上的實現通常還是要用到濾鏡，而不是CSS3。

第3步：

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

在ID或類中增加以下的動畫代碼

#box
{-webkit-animation-name: fadeIn; /*動畫名稱*/
-webkit-animation-duration: 3s; /*動畫延續時間*/
-webkit-animation-iteration-count: 1; /*動畫次數*/
-webkit-animation-delay: 0s; /*延遲時間*/}

通過上面的代碼便可實現淡入淡出的動畫效果，代碼具體的含義已在注釋中注明。

案例：

#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; /*動畫名稱*/

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

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

-webkit-animation-name: fade, drop; /*動畫名稱*/
     -webkit-animation-iteration-count: infinite;/* 設定動畫履行的次數，其值可以是數字也能夠是infinite（循環履行）。 */
     -webkit-animation-direction: alternate;/* 設定動畫履行的方向，其值可以是normal（正常順序播放）或alternate（反向播放） */
     -webkit-animation-timing-function: ease-in-out; /* 變化速率函數，取的是貝塞爾曲線，這個是加速再減速 */
     -webkit-transform-origin: 50% ⑴00%;/* 元素的懸掛點即為它旋轉和傾斜時的中心點。取值中的a、b可以是長度值、以%結尾的百分比或left、top、right、bottom4個值。這里像個鐘擺 */
}

有1些參考代碼：

代碼以下:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<title>CSS3動畫</title>
<link type="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代碼：

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

關于css3動畫和jquery的動畫的優劣對照：

 CSS3動畫提供了2D和3D和常規動畫屬性接口，它可以工作在頁面的任何1個元素的任意1個屬性，CSS3的動畫是利用C語言編寫的，它是系統層面的動畫，因此它的效力絕對的高于js摹擬的動畫，真的就是這樣嗎？
經過我們的測試發現CSS3動畫與javascript摹擬動畫有以下區分：


1＼ CSS 3D動畫在js中沒法實現；
      CSS3的3D動畫是CSS3中非常強大的功能，由于它的工作原理是在1個3維的空間里，因此js是沒法摹擬出像CSS3那樣的3D動畫，固然這個3D動畫的實際利用場景是不是很廣，值得思考……

2＼ CSS 2D矩陣動畫效力高于js利用margin和left,top摹擬的矩陣動畫；
      CSS3的2D動畫是指是2D矩陣Transform變化，比如縮放＼變形＼x軸＼y軸，js固然是不能做變形動畫的。就拿坐標動畫來講，經過我們的測試發現使用CSS3的transform做translateXY動畫比js中的position left，position right快了近700mm!而且視覺上也比js動畫流暢很多。

3＼ CSS3其它常規動畫屬性的效力均低于js摹擬的動畫;
      常規動畫屬性在這里是指：height，width,opacity,border-width,color…..
      我們曾在Android HTC中測試將1個DOM元素從height:0改變成height:100，我們使用了jQuery animate和CSS3的transition和animation，結果表明：CSS3的tansition和animation均慢于jQuery animate 500mm！其它的常規動畫屬性均慢于jQuery animate 400⑸00mm!。

      以上是我們就CSS3動畫和jQuery動畫做過的1些簡單的測試，我們希望您也能夠在評論中列出您的測試結果。下面我們再來看看動畫事件。

      每在頁面履行1次動畫時，都應當帶有最少兩個事件animationStart和animationEnd有的可能還需要animationDuration，在手機上我們不推薦animationDuration，本來效力就已非常低了，盡可能不要在動畫履行期間還做其它的事件。

      用js摹擬動畫，需要開發者編寫這些動畫事件的接口，以便更好的做下1步的工作，而CSS3動畫不需要開發者編寫這些事件接口，閱讀器本身就已提供了，拿webkit內核的閱讀器舉例，它提供了webkitTransitionStart,webkitTransitionEnd,webkitAnimationStart,webkitAnimationDuration,webkitAnimationEnd事件接口，開發者可以很方便的使用這些事件。

      通過上面的討論我們可以發現1個結果：
      至于采取js動畫還是css3動畫，需要開發者根據不同的需求做出不同的決定，但應當遵守1個基本的原則是：
      如果你需要做2D動畫，請勿必使用CSS3的transition或animation。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈