transition過度

指定進行過度的css屬性

transition-property：none | <single-transition-property>[ ,<single-transition-property> ]*

<single-transition-property> = all | <IDENT>

• 默認值：all
• none： 不指定過渡的css屬性
• all： 所有可以進行過渡的css屬性
• <IDENT>： 指定要進行過渡的css屬性
• 檢索或設(shè)置對象中的參與過渡的屬性。
  • 默認值為：all。默認為所有可以進行過渡的css屬性。
  • 如果提供多個屬性值，以逗號進行分隔。

設(shè)置css屬性過度的時間

transition-duration：<time>[ ,<time> ]*

///過度時間函數(shù)
transition-timing-function：<single-transition-timing-function>[,<single-transition-timing-function>]*

<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)

• 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(<integer>[, [ start | end ] ]?)： 接受兩個參數(shù)的步進函數(shù)。第一個參數(shù)必須為正整數(shù)，指定函數(shù)的步數(shù)。第二個參數(shù)取值可以是start或end，指定每一步的值發(fā)生變- 化的時間點。第二個參數(shù)是可選的，默認值為end。
• cubic-bezier(<number>, <number>, <number>, <number>)： 特定的貝塞爾曲線類型，4個數(shù)值需在[0, 1]區(qū)間內(nèi)

transition-delay：<time>[ ,<time> ]*

• <time>： 指定對象過渡的延遲時間

縮寫 transition

transition：<single-transition>[,<single-transition>]*

<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

復(fù)合屬性。檢索或設(shè)置對象變換時的過渡。

• 注意：如果只提供一個<time>參數(shù)，則為 <' transition-duration '>的值定義；如果提供二個<time>參數(shù)，則第一個為 <' transition-duration '>的值定義，第二個為 <' transition-delay '> 的值定義

• 可以為同一元素的多個屬性定義過渡效果。示例：

transition:
        border-color .5s ease-in .1s,
        background-color .5s ease-in .1s,
        color .5s ease-in .1s;

動畫 Animation

animation-name 指定動畫名稱

animation-name：<single-animation-name>[,<single-animation-name>]*
<single-animation-name> = none | <identifier>

• 默認值：none
• none： 不引用任何動畫名稱
• <identifier>： 定義一個或多個動畫名稱(identifier標(biāo)識)
• 說明
  • 檢索或設(shè)置對象所應(yīng)用的動畫名稱，必須與規(guī)則@keyframes配合使用，因為動畫名稱由@keyframes定義
  • 如果提供多個屬性值，以逗號進行分隔。

animation-duration：動畫持續(xù)的時間

animation-duration：<time>[,<time>]*

animation-timing-function 時間函數(shù)

animation-timing-function：<single-animation-timing-function>[,<single-animation-timing-function>]*

<single-animation-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)

• 語法跟transition-timing-function一致

animation-iteration-count動畫執(zhí)行次數(shù)

animation-iteration-count：<single-animation-iteration-count>[,<single-animation-iteration-count>]*

<single-animation-iteration-count> = infinite | <number>

• 默認值 ：1
• infinite： 無限循環(huán)
• <number>： 指定對象動畫的具體循環(huán)次數(shù)

animation-direction定義動畫運動的方向

animation-direction：<single-animation-direction>[,<single-animation-direction>]*

<single-animation-direction> = normal | reverse | alternate | alternate-reverse

• 默認值：normal
• normal： 正常方向
• reverse： 反方向運行
• alternate： 動畫先正常運行再反方向運行，并持續(xù)交替運行
• alternate-reverse： 動畫先反運行再正方向運行，并持續(xù)交替運行

animation-play-state動畫狀態(tài)

animation-play-state：<single-animation-play-state>[,<single-animation-play-state>]*

<single-animation-play-state> = running | paused

• 默認值：running
• running： 運動
• paused： 暫停

animation-delay 動畫延時執(zhí)行

animation-delay：<time>[,<time>]*

• 默認值：0

animation-fill-mode 設(shè)置是否保存動畫狀態(tài)

animation-fill-mode：<single-animation-fill-mode>[,<single-animation-fill-mode>]*

<single-animation-fill-mode> = none | forwards | backwards | both

• 默認值：none
• none： 默認值。不設(shè)置對象動畫之外的狀態(tài)
• forwards： 設(shè)置對象狀態(tài)為動畫結(jié)束時的狀態(tài)
• backwards： 設(shè)置對象狀態(tài)為動畫開始時的狀態(tài)
• both： 設(shè)置對象狀態(tài)為動畫結(jié)束或開始的狀態(tài)

animation：縮寫

animation：<single-animation>[,<single-animation>]*

<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

• <' animation-name '>： 檢索或設(shè)置對象所應(yīng)用的動畫名稱
• <' animation-duration '>： 檢索或設(shè)置對象動畫的持續(xù)時間
• <' animation-timing-function '>： 檢索或設(shè)置對象動畫的過渡類型
• <' animation-delay '>： 檢索或設(shè)置對象動畫延遲的時間
• <' animation-iteration-count '>： 檢索或設(shè)置對象動畫的循環(huán)次數(shù)
• <' animation-direction '>： 檢索或設(shè)置對象動畫在循環(huán)中是否反向運動
• <' animation-fill-mode '>： 檢索或設(shè)置對象動畫時間之外的狀態(tài)
• <' animation-play-state '>： 檢索或設(shè)置對象動畫的狀態(tài)。w3c正考慮是否將該屬性移除，因為動畫的狀態(tài)可以通過其它的方式實現(xiàn)，比如重設(shè)樣式

@keyframs 定義動畫關(guān)鍵幀

@keyframes <identifier> { <keyframes-blocks> }

<keyframes-blocks>：[ [ from | to | <percentage> ]{ sRules } ] [ [ , from | to | <percentage> ]{ sRules } ]*

• <identifier>： identifier定義一個動畫名稱
• <keyframes-blocks>： 定義動畫在每個階段的樣式，即幀動畫
• 指定動畫名稱和動畫效果。
  • @keyframes定義的動畫名稱用來被animation-name所使用。
  • 定義動畫時，簡單的動畫可以直接使用關(guān)鍵字from和to，即從一種狀態(tài)過渡到另一種狀態(tài)：

@keyframes testanimations {
    from { opacity: 1; }
    to { opacity: 0; }
}

+ 如果復(fù)雜的動畫，可以混合`<percentage>`去設(shè)置某個時間段內(nèi)的任意時間點的樣式： 

@keyframes testanimations {
    from { transform: translate(0, 0); }
    20% { transform: translate(20px, 20px); }
    40% { transform: translate(40px, 0); }
    60% { transform: translate(60px, 20); }
    80% { transform: translate(80px, 0); }
    to { transform: translate(100px, 20px); }
}

+ 當(dāng)然，也可以不使用關(guān)鍵字from和to，而都使用`<percentage>`： 

@keyframes testanimations{
    0% { transform: translate(0, 0); }
    20% { transform: translate(20px, 20px); }
    40% { transform: translate(40px, 0); }
    60% { transform: translate(60px, 20px); }
    80% { transform: translate(80px, 0); }
    100% { transform: translate(100px, 20px); }
}

注意，這里的0%不能簡寫成0，0是非標(biāo)準(zhǔn)語法（雖然被某些瀏覽器所支持）。