規定過渡效果的 css 屬性名
-webkit-transition-property: none / all / property;規定完成過渡效果需要多少時間-moz-transition-property: none / all / property;
-ms-transition-property: none / all / property;
-o-transition-property: none / all / property;
transition-property: none / all / property;
/*引數說明
- none
- all，預設值
- property(css屬性名) 例如color、opacity...
*/
transition-duration: time;規定速度效果的速度曲線/*引數說明
- 規定完成過渡效果需要花費的時間（以秒或毫秒計）
- 預設值是 0
*/
transition-timing-function: ease / linear / ease-in / ease-out / ease-in-out定義過渡效果何時開始step-start / step-end / steps(, [ start / end ])
cubic-bezier(, , , );
/*引數說明
− linear：線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
− ease：平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
− ease-in：由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)
− ease-out：由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0)
− ease-in-out：由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)（最佳效果）
− step-start：等同於 steps(1, start)
− step-end：等同於 steps(1, end)
− steps([, [ start | end ] ]?)：接受兩個引數的步進函式
第乙個引數：必須為正整數，指定函式的步數
第二個引數：取值可是start或end，指定每一步的值發生變化的時間點
第二個引數：可選，預設值為end
− cubic-bezier(, , , )：
特定的貝塞爾曲線型別，4個數值需在[0, 1]區間內
*/
transition-delay: time;關鍵幀，可以指定任何順序排列來決定animation動畫變化的關鍵位置/*引數說明
- 指定秒或毫秒數之前要等待切換效果開始
- 預設值是 0
@keyframes animationname }規定需要繫結到選擇器的 keyframe 名稱/*引數說明
animationname：必寫項，定義animation的名稱
keyframes-selector：必寫項，動畫持續時間的百分比，0-100%、from (0%)、to (100%)
css-styles：必寫項，乙個或多個合法的css樣式屬性
@keyframes animationname在style中單獨寫入
*/
animation-name: keyframename / none;規定完成動畫所花費的時間，以秒或毫秒計/*引數說明
keyframename：指定要繫結到選擇器的關鍵幀的名稱；
none：指定有沒有動畫（可用於覆蓋從級聯的動畫）
*/
animation-duration: time;規定動畫的速度曲線/*引數說明
*/
animation-timing-function: ease / linear / ease-in / ease-out / ease-in-out規定在動畫開始之前的延遲step-start / step-end / steps(, [ start / end ])
cubic-bezier(, , , );
/*引數說明
− linear：線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
− ease：平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
− ease-in：由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)
− ease-out：由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0)
− ease-in-out：由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)（最佳效果）
− step-start：等同於 steps(1, start)
− step-end：等同於 steps(1, end)
− steps([, [ start | end ] ]?)：接受兩個引數的步進函式
第乙個引數：必須為正整數，指定函式的步數
第二個引數：取值可是start或end，指定每一步的值發生變化的時間點
第二個引數：可選，預設值為end
− cubic-bezier(, , , )：
特定的貝塞爾曲線型別，4個數值需在[0, 1]區間內
*/
animation-delay: time;/*引數說明
可選。定義動畫開始前等待的時間，以秒或毫秒計。預設值為0
如果值為負，則動畫馬上開始，但會跳過相應的時間進入動畫
*/
animation-iteration-count: infinite / ;/*引數說明
為數字，其預設值為「1」；infinite為無限次數迴圈
*/
animation-direction: normal / reverse / alternate / alternate-reverse / initial / inherit;/*引數說明
normal：正常方向
reverse：反方向執行
alternate：先正後反，並持續交替執行（需依賴infinite）
alternate-reverse：先反後正，並持續交替執行（需依賴infinite）
*/
animation-fill-mode: none / forwards / backwards / both / initial / inherit;規定動畫執行或暫停/*引數說明
none：預設值。不設定物件動畫之外的狀態
forwards：設定物件狀態為動畫結束時的狀態
backwards：設定物件狀態為動畫開始時的狀態
both：設定物件狀態為動畫結束或開始的狀態
*/
animation-play-state: paused / running;復合寫法/*引數說明
paused：指定暫停動畫
running：預設值，指定正在執行的動畫
*/
animation: name duration timing-function delay iteration-count direction fill-mode play-state;增強頁面渲染效能，提前通知瀏覽器元素將要做什麼動畫，讓瀏覽器提前準備合適的優化設定/*引數說明
預設寫在前面的時間為duration
*/
will-change: auto / scroll-position / contents / / ;/*引數說明
auto：此關鍵字表示沒有特定的意圖，適用於它通常所做的任何啟發式和優化
scroll-position：表示將要改變元素的滾動位置
contents：表示將要改變元素的內容
：明確指定將要改變的屬性與給定的名稱
：可動畫的一些特徵值，比如left、top、margin等
*/相容性：ie13+、firefox47+、chrome49+、safari9.1+、opera39+、ios9.3+、android52+
CSS3過渡與動畫
過渡是兩個狀態之間的過渡，只能從一種狀態過渡到另一種狀態 過渡需要事件觸發，不能自動執行 可以同時控制多個屬性進行過渡，多個屬性之間用逗號隔開 csstransition width 2s linear 1s,height 2s linear 1s transition duration trans...
CSS3動畫 過渡
css3過渡是元素從一種樣式轉換成另一種樣式。使用transition屬性 transition property 過渡的名稱 transition duration 過渡效果花費的時間 transition timing function 過渡效果的時間曲線 transition delay 過渡...
CSS3 過渡 動畫
css3 過渡是元素從一種樣式逐漸改變為另一種的效果。要實現這一點，必須規定兩項內容 應用於寬度屬性的過渡效果，時長為 2 秒 div 注釋 如果時長未規定，則不會有過渡效果，因為預設值是 0。效果開始於指定的 css 屬性改變值時。css 屬性改變的典型時間是滑鼠指標位於元素上時 規定當滑鼠指標懸...