transition是複合屬性，可以改變元素數值類的屬性，例如寬高、背景顔色等。
一個元素從一個樣式過渡到另外一個樣式需要的時間，transition可以設定過渡的時間速度等。
如下代碼，當滑鼠移入div1元素時，會從#div1的樣式變到#div1:hover的樣式。
transition-duration:1s;設定樣式變化經曆的時間（1秒）；
transition-property:left;隻改變某個屬性的值（left）；
transition-timing-function:ease-in-out;改變變化速度；
transition-delay:1s;變化延時時間（1秒）。
還可以把這些屬性寫在一起：
<code>transition:1s width,2s 0.5s left,3s 2.5s background;</code>
寬度變化經曆1s;left 0.5s後開始變化，經曆2s;背景2.5s後開始變化，經曆3s。
補充：transform:rotate(720deg);旋轉720度
border-radius的寫法：1-4個數字/1-4個數字 ；
1、“/”左右兩邊都可以寫1-4個數字，并且左右兩邊的數字個數可以不同。
2、左邊代表水準方向，右邊代表垂直方向，沒有“/”則水準垂直的弧度都一樣，某個角的實際效果由左右兩邊共同決定。
3、某一邊寫1-4數字的效果為（左右兩邊同理）：
4個值：沒個值按順訊分别控制左上，右上，右下，左下（順時針方向）四個方向。
3個值：第一個值控制左上，第二個值控制右上和左下，第三個值控制右下 ；
2個值： 對角弧度一樣，第一個值控制左上和右下，第二個值控制右上和左下。
1個值：4個角的弧度一樣。
總結：4個值時，從左上開始順時針每個值控制一個方向，每少一個值，原來對應位置的值就和對角線一樣，一個值時當然全部一樣。
4、弧度的值可以是像素px，也可以是百分百（表示原來寬或高的百分之幾）。
1、box-shadow和text-shadow可以設定多組值，每組可以代表不同方向的陰影，每組可以有2-5個值。
2、每組的5個值分别表示：水準偏移、垂直偏移、模糊半徑、陰影的尺寸、陰影的顔色。
3、其中水準偏移和垂直偏移不可少，如果沒有偏移也要設定為0；如果帶像素機關的值少于2個則沒有效果。
4、最後一個值代表顔色，用機關和其他值區分，顔色寫到前面也沒有效果，當顔色沒有指定時，預設陰影為黑色
5、前面4個機關為px的值，每少些一個，後面的值就為0；寫三個時代表水準偏移、垂直偏移、模糊半徑；寫兩個時代表水準偏移、垂直偏移；
6、偏移值以右下為證，當水準偏移、垂直偏移為負數時，分别代表向左和向上偏移。
以下是未加入選擇器時的代碼；
結果圖如下：
下面的代碼都是加入到style中的，改變style後會給出相應的效果圖；
這裡#div1 p:nth-child(3)先選中第三個元素<code><div>456</div></code>，但是由于不是聲明的p元素，是以無效，不改變樣式；而第五個元素符合條件，改變了樣式。
2n+1選中的有第1、3、5、7；由于第個不是聲明的元素是以無效；
nth-of-type在查找的時候就已經指定類型了，對nth-of-type來說不是指定類型的元素的不編号查找,就當它們不存在；括号裡參數的值和nth-child一樣。
nth-of-type(3)查找父級下的第三個p元素，實際上父級下的第三個元素是<code><div>456</div></code>，但不是P元素，是以不給它編号，直接跳過忽略，父級的第四個元素才是要找的第三個p元素，是以改變了樣式。
nth-child是不管什麼元素全部編号查出符合參數值的元素，再看看是否為聲明元素，是則該編樣式，不是則不改變。
nth-of-type是先篩選出聲明的元素，再編号，再查出符合參數值的元素，然後改變樣式。
以下是未加入漸變效果的代碼；下面加入漸變效果的代碼都是加在#div1的樣式中的，加入後會給出效果圖；
效果圖就是一個框，什麼都沒有：
1、第一個參數可以寫方向（也可以不寫方向，線性漸變方向預設top從上到下，徑向漸變預設在中心），徑向漸變可以以像素為機關設定坐标的偏移量，後面的參數全部都是設定顔色的，每個參數之間用“,”隔開，顔色參數可以無數個。
2、當第一個參數寫了方向時，要聲明浏覽器核心，否則會有相容問題；
以下是主要浏覽器的核心：
谷歌 -webkit-
火狐 -moz-
opera -o-
ie -ms-
例如要相容谷歌浏覽器要把linear-gradient改成-webkit-linear-gradient；
好了，寫第一個樣式來看看效果：<code>background:radial-gradient(red,blue ,green)</code>
預設漸變中心就是在元素的中心，每個顔色的空間預設平均配置設定。
第二個例子：<code>background:-webkit-radial-gradient(30px 30px, red,blue ,green)</code>
可以看到中心偏移了
第三個例子：
<code>background:-webkit-radial-gradient(bottom,red,blue ,green)</code>
中心在底部。
線行漸變方向預設top從上到下，方向參數可以用度數deg來确定。
第四個例子：<code>background:linear-gradient(red ,blue ,green);</code>
第五個例子：<code>background:-webkit-linear-gradient(30deg,red ,blue ,blue ,green);</code>
第六個例子：<code>background:-webkit-linear-gradient(90deg,red ,blue ,green);</code>
傾斜90度就和<code>background:-webkit-linear-gradient(bottom,red ,blue ,green);</code>是一樣的
3、顔色參數可以分為兩個部分，第一部分為顔色，第二部分為顔色從哪裡開始漸變，是個百分比值，表示占元素寬高的百分之幾；
第七個例子：<code>background:-webkit-linear-gradient(left,red 10%,blue 50%,green 50%);</code>
前10%都是紅色的，從10%-50%開始向藍色漸變，50%-50%從藍色到綠色漸變，由于50%=50%，是以這裡藍色到綠色沒有漸變空間，直接變色。
1、transform屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
在操作元素的樣式裡加上transition:1s;然後#元素id:hover{transform: 方法();}就可以實作單滑鼠移入該元素時産生動畫的效果了。下面說說transform的方法。
rotate（n deg）旋轉n度。
skew(x-angle,y-angle)定義沿着 X 和 Y 軸的 2D 傾斜轉換。
skewX(angle) 定義沿着 X 軸的 2D 傾斜轉換。
skewY(angle)定義沿着 Y 軸的 2D 傾斜轉換。
scale(angle) 整體擴大 取值 正數 小數 負數 比原來的大小擴大幾倍 為負數時先縮小到沒有在擴大到負數的絕對值倍
scaleX(angle) 左右方向擴大
scaleY(angle) 垂直方向擴大
translate 改變位置 預設向右
translateX 橫向位置 左負 右正
translateY 縱向位置 上負 下正
要實作3D效果必須在相應元素建立3D環境和設定景深（3D效果是在多遠的距離看到的）；
下面介紹一些屬性和方法的功能：
rotate旋轉；
transform-origin 設定旋轉基點；