過度transition
css的transition允許css的屬性值在一定的時間區間內平滑的過渡
語法格式
transition：屬性名 時間 速度曲線 何時開始
transition：width 2s ease-in 2s;
-webkit-transition:width 2s ease-in 3s;
width 因為我們是為寬度寫了hover後的值，所以如果這裡寫height屬性是不會有過渡效果的
2s整個過渡效果持續的時間
ease-in 指定了過渡的動畫效果
3s 過3秒後開始執行過渡效果
動畫效果的可選值
linear 規定以相同的速度開始到結束（等於 cubic-bezier(0,0,1,1））。
ease 規定慢速開始，然後變快，最後慢速結束
ease-in 規定慢速開始
ease-out 規定慢速結束
ease-in-out 規定慢速開始和結束的效果
cubic-bezier(n,n,n,n) 在cubic-bezier函式中定義自己的值。數值在0至1之間。
transform 轉換
通常的屬性包含了屬性名和屬性值，而css3的transform屬性是用函式來定義的。
transform 2d 最常用到的函式是rotate（30deg)
書寫格式
transform：rotate（30deg）;
通過rotate（）方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。它以deg為單位，代表了旋轉的角度。
示例：div
div:hover
transform3d相關函式
rotatex()
rotate的翻轉，好比一張紙，在根據x軸水平的翻轉
rotatey()
rotatey與rotate函式一樣，只不過是通過y軸垂直翻轉。
translate3d(x,y,z)
此函式用來規定指定元素在三維空間的位移。它有三個值，x軸，y軸，z軸。
示例：內容內容內容內容內容
transition與animation的區別
我們為頁面設定動畫時，往往會用到transition還有animation以及transfrom屬性或者用到js。其實通常情況下，對於使用js我們更加傾向於使用css來設定動畫。transfrom就不用說了，它本身就乙個css屬性。transition 是可以為乙個或者多個用數值表示的css屬性發生...
過度與動畫
1,過渡三要素 1.1必須要有屬性發生變化 1.2必須告訴系統哪個屬性需要執行過渡效果 1.3必須告訴系統過渡效果持續時長 2.注意點 當多個屬性需要同時執行過渡效果時用逗號隔開即可 transition property width,background color transition dura...
過度與動畫
1 過渡屬性 transition property 屬性 表示可過渡的樣式屬性 transition property all css1 transition duration 屬性 表示過渡持續時間 transition duration transition delay 屬性 表示過渡延遲時間...