transition 實現過渡效果：通過一些簡單的css動作觸發平滑過渡功能
任何用戶動作，都可以觸發元素的過渡效果，例如偽類動作:hover、:focus、:active、:checked；
例如點擊事件等只要使元素（如圖片）的樣式發生改變，都可以觸發該元素的過渡效果。
包含屬性如下：
一、transition-property 指定過渡或動態模擬的css屬性
屬性值如下所示：
1、none 沒有指定任何樣式
2、all 默認值，指定該元素符合過渡規范的所有樣式
3、指定樣式 指定你要修改的、符合過渡規范的樣式支持多個值，可以用逗號連接。
eg. div{transition-property:margin,background-color,border;}二、transition-duration 指定完成過渡所需的時間
設置具體的時間，默認值為0，如果半秒鐘可以設置為.5s
eg. div{transition-property:margin,background-color,border;transition-duration:1s;}三、transition-timing-function 指定過渡效果運行時，產生的過渡效果
屬性值如下所示：
1、ease 默認值，元素樣式從初始狀態過渡到結束狀態時，速度由快到慢，逐漸變慢，
等同于貝賽爾曲線（0.25,0.1,0.25,1.0）
2、linear 元素樣式從初始狀態過渡到終止狀態速度是恒速。等同于貝賽爾曲線
（0.0,0.0,1.0,1.0）
3、ease-in 元素樣式從初始狀態過渡到終止狀態時，速度越來越快，呈一種加速狀態。等
同于貝賽爾曲線（0.42,0.0,1.0,1.0）
4、ease-out 元素樣式從初始狀態過渡到終止狀態時，速度越來越慢，呈一種減速狀態。等
同于貝賽爾曲線（0.0,0.0,0.58,1.0）
5、ease-in-out 元素樣式從初始狀態過渡到終止樣式時，先加速，再減速。等同于貝賽爾曲線
（0.42,0.0,0.58,1.0）
6、自定義屬性 使用cubic-bezier(p0,p1,p2,p3)，里面有四個參數,p0和p2值在0~1之間
7、跳躍式過渡 steps(n,type)，第一個值是一個數值，表示跳躍幾次,分幾步完成，若n值為1，
那么表示該元素沒有過渡效果，直接轉換樣式。第二個值是start或者end（默認），可選值。表
示開始是跳躍，還是結束時跳躍。
eg. div{transition-timing-function:ease;transition-timing-function:cubic-bezier(0.0,-0.4,1.0,0.8);transition-timing-function:steps(5,end);}四、transition-delay 效果在設置的延遲時間后再執行
如果有多個樣式效果，可以設置多個延遲時間，以空格隔開。
eg. div{transition-property:margin,background-color,border;transition-duration:1s;transition-delay:2s; 一起設置transition-delay:0s 2s 0s; 分別設置}五、transition 簡寫形式
直接使用transition來簡寫，有兩種形式的簡寫，如下所示
1、每個樣式單獨聲明；
eg. div{transition:background-color 1s ease 0s,color 1s ease 0s;}2、直接使用all，統一聲明
eg. div{transition:all 1s ease 0s;}注意：過渡效果的標準樣式要求瀏覽器的版本過高，建議在標準樣式的前面，加上各瀏覽器帶前綴
的過渡樣式。
各瀏覽器前綴如下：
谷歌 -webkit-
火狐 -moz-
Opear -o-
IE -ms-
看文倉www.kanwencang.com網友整理上傳,為您提供最全的知識大全,期待您的分享，轉載請注明出處。
歡迎轉載：http://www.kanwencang.com/bangong/20170206/98363.html
文章列表
留言列表
