網站首頁 網站建設 公司動態 行業新聞 案例展示 關于我們

文章內容

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, TimingFunction

查看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,

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

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

客服熱線:tel(謝先生)  客服QQ:1323605005  
服務郵箱:[email protected](售前咨詢)  [email protected](技術部)  [email protected](售后服務)
公司地址:四川省攀枝花市
郵編:617200

青海十一选五开奖图