CSS3 動畫系列3-transition（過渡）

日期：2013-11-22  來源：攀枝花惠康網絡公司

年夜例子中可以看出，transitionend 事務會在 每個過渡屬性完成時都觸發該事務，而且瀏覽器下還有紛歧致的處所，好比border過渡的時辰，webkit下只觸發一次,輸出：

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/transitionend

CSS 過渡（transition）是經由過程界聳ё侏素年夜 起點的狀況 和 竣事點的狀況 ，在必然的時刻區間內實現元素滑膩地過渡或轉變 的一種補間動畫機制。你可以讓屬性的改變過程持續一段時刻，而不是當即生效。

例如：

CSS 123 transition-delay: 5s;transition-delay: 4000ms, 8000ms;transition-delay: -5s;

Transition又包含了四個子屬性，分袂為transition-property,變換延續的時刻：transition-duration,在延續時刻段，變換的速度轉變transition-timing-function,變換延遲時刻transition-delay。界說也很是矯捷，先介紹一下這4個子屬性：

transition-property（過渡屬性）

1. 可以零丁指定元素哪些屬性改變時執行過渡（transition），可以觸發瀏覽器reflow或repaint的屬性那些CSS屬性可以應用動畫，可參見： http://www.css88.com/archives/5446 這里列出所有的CSS屬性，如不美觀可以做動畫，那么會聲名是若何設置。
2. 可以指定為all，元素任何可過渡（transition）屬性值轉變時都將執行過渡（transition）效不美觀。
3. 可以指定為none時，動畫當即遏制。
4. 初始默認值為all

oTransitionEnd 

語法：

CSS 1 transition-property: none | all | [ <IDENT> ] [, <IDENT> ]*

舉薦兩個簡單直不美觀的cubic-bezier() 貝塞爾曲線設置工具：

例如：

CSS 1234 transition-property: all;transition-property: none;transition-property: background-color;transition-property: background-color, height, width;
webkitTransitionEnd

transition-duration（過渡持續時刻）

1. 用來指定元素過渡過程的持續時刻，時刻值，1s(秒)，4000ms(毫秒)。
2. 其默認值是0s，也可以理解為無過渡（transition）效不美觀。

語法：

CSS 1 transition-duration: <time> [, <time>]*

例如：

CSS 123 transition-duration: 2s;transition-duration: 4000ms;transition-duration: 1s,

查看demo：分歧的timing functions demo http://css88.com/demo/css3_transition/

http://www.webstuffshare.com/2012/04/showing-product-information-with-css3-3d-transform/

http://cubic-bezier.com/

注：關于step-start，step-end，steps(<integer>[, [ start | end ] ]?)取置魅這里不做聲名，巨匠可以看看 http://www.w3.org/TR/css3-transitions/#transition-timing-function-property 和 https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

transition-delay（過渡延遲函數）

指定一個動畫起頭執行的時刻，即當改變元素屬性值后多長時刻起頭執行“轉換效不美觀”，初始默認值為0；
語法：

CSS 1 transition-delay: <time> [, <time>]*

transition的簡寫

語法：

CSS 12 transition: <transition> [, <transition>]*<transition> = <transition-property> <transition-duration> <transition-timing-function> <transition-delay>

將按下面這樣措置:

1234 div {  transition-property: opacity, left, top, height;  transition-duration: 3s, 5s, 3s, 5s;}

近似地，如不美觀某個屬性的值列表長于 transition-property 的，將被截短。 例如:

1234 div {  transition-property: opacity, left;  transition-duration: 3s, 5s, 2s, 1s;}

將按下面這樣措置:

1234 div {  transition-property: opacity, left;  transition-duration: 3s,

文章來源：攀枝花惠康網絡公司

惠康網絡，是一家專業從事攀枝花網站建設，攀枝花網站制作，攀枝花網站設計公司，提供網站建設一條龍服務（網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣），惠康網絡立足攀枝花，輻射全中國，攀枝花惠康網絡的客戶已經遍布國內各地大中小城市，我們高效優質的網站建設服務深受用戶好評。