css3基礎---transition過渡
預設值：
transition-delay: 0s
transition-duration: 0s
transition-property: all
transition-timing-function: ease
transition-property 指定應用過渡屬性的名稱
預設值為all，表示所有可被動畫的屬性都表現出過渡動畫(https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties)
可以指定多個property
屬性值：
none
沒有過渡動畫。
all
所有可被動畫的屬性都表現出過渡動畫。
IDENT
屬性名稱（可以指定多個）
transition-duration
預設值為 0s ，表示不出現過渡動畫。
可以指定多個時長，每個時長會被應用到由 transition-property 指定的對應屬性上。如果指定的時長個數小於屬性個數，那麼時長列表會重複。如果時長列表更長，那麼該列表會被裁減。兩種情況下，屬性列表都保持不變。
屬性值
以毫秒或秒為單位的數值
<time> 型別。表示過渡屬性從舊的值轉變到新的值所需要的時間。如果時長是 0s ，表示不會呈現過渡動畫，屬性會瞬間完成轉變。不接受負值。一定要加單位(不能寫0 一定要寫0s 1s,0s,1s)！
transition-delay屬性規定了在過渡效果開始作用之前需要等待的時間。
預設值：0s
你可以指定多個延遲時間，每個延遲將會分別作用於你所指定的相符合的css屬性。如果指定的時長個數小於屬性個數，那麼時長列表會重複。如果時長列表更長，那麼該列表會被裁減。兩種情況下，屬性列表都保持不變
屬性值
值以秒（s）或毫秒（ms）為單位，表明動畫過渡效果將在何時開始。取值為正時會延遲一段時間來響應過渡效果；取值為負時會導致過渡立即開始。
transition-timing-function
屬性值：
1、ease：（加速然後減速）預設值，ease函式等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0).
2、linear：（勻速），linear 函式等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函式等同於貝塞爾曲線(0.42, 0, 1.0, 1.0).
4、ease-out：（減速），ease-out 函式等同於貝塞爾曲線(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然後減速），ease-in-out 函式等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)
6、cubic-bezier： 貝塞爾曲線
7、step-start：等同於steps(1,start)
step-end：等同於steps(1,end)
steps(<integer>,[,[start|end]]?)
第一個引數：必須為正整數，指定函式的步數
第二個引數：指定每一步的值發生變化的時間點（預設值end）
注意點
transition-property: background,width,height;
transition-duration: 3s,2s;
transition-delay:3s,2s;
transition-timing-function:linear;
transition-property: background,width,height;
transition-duration: 3s,2s,3s;
transition-delay:3s,2s,3s;
transition-timing-function:linear,ease,ease;
超出的情況下是會被全部截掉的
不夠的時候，關於時間的會重複列表，transition-timing-function的時候使用的是預設值ease
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } html,body{ height: 100%; overflow: hidden; } .wrap{ height: 200px; width: 200px; background-color: pink; border-radius: 50%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; transition-property: all; transition-duration: 4s; transition-timing-function: linear; transition-delay: 1s; } .wrap:hover{ height: 50px; width: 50px; background-color: black; } </style> </head> <body> <div class="wrap"> </div> </body> </html>