合买大神
网站首页 网站建设 公司动态 行业新闻 案例展示 关于我们

文章内容

CSS3 动画系列3-transition(过渡)

日期:2013-11-22  来源:攀枝花惠康网络公司

年夜例子中可以看出,transitionend 事务会在 每个过渡属性完成时都触发该事务,而且浏览器下还有纷歧致的处所,好比border过渡的时辰,webkit下只触发一次,输出:

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

CSS 过渡(transition)是经由过程界耸ё侏素年夜 起点的状况 和 竣事点的状况 ,在必然的时刻区间内实现元素滑腻地过渡或转变 的一种补间动画机制。你可以让属性的改变过程?#20013;?#19968;段时刻,而不是当即生效。

例如:

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

Transition又包含了四个子属性,分袂为transition-property,变换?#26377;?#30340;时刻:transition-duration,在?#26377;?#26102;刻段,变换的速度转变transition-timing-function,变换延迟时刻transition-delay。界说也很是矫捷,先介绍一下这4个子属性:

transition-property(过渡属性)

  1. 可以零丁指定元素哪些属性改变时执行过渡(transition),可?#28304;?#21457;浏览器reflow或repaint的属性那些CSS属性可以应用动画,可参见: http://www.css88.com/archives/5446 这里列出所有的CSS属性,如不美观可以做动画,那么会声名是若何设置。
  2. 可以指定为all,元素任何可过渡(transition)属性值转变时都将执行过渡(transition)效不美观。
  3. 可以指定为none时,动画当即遏制。
  4. 初始默?#29616;?#20026;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(过渡?#20013;?#26102;刻)

  1. 用来指定元素过渡过程的?#20013;?#26102;刻,时刻值,1s(秒),4000ms(毫秒)。
  2. 其默?#29616;?#26159;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 ] ]?)取置?#26085;?#37324;不做声名,巨匠可以看看 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(过渡延迟函数)

指定一个动画起?#20998;?#34892;的时刻,即当改变元素属性值后多长时刻起?#20998;?#34892;“转换效不美观”,初始默?#29616;?#20026;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,

文章来源:攀枝花惠康网络公司

惠康网络,?#19988;?#23478;专业从事攀枝花网站建设,攀枝花网站制作,攀枝花网站设计公司,提供网站建设一条龙服务(网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广),惠康网络立足攀枝花,辐射全中国,攀枝花惠康网络的客户已经遍布国内各地大?#34892;?#22478;市,我们高效优质的网站建设服务深受用户好评。

?#22836;认擼?img src="skin/images/tel.png" alt="tel" height="15" width="84" style="vertical-align:middle;">(谢先生)  ?#22836;Q:1323605005  
服务邮箱:[email protected](售前咨询)  [email protected](技术部)  [email protected](售后服务)
公司地址:四川省攀枝花市
?#26102;啵?/span>617200

合买大神 卡迪夫城市形象 塔什干火车头vs迪拜国民 电脑吃鸡游戏图标 范尼斯特鲁伊 最新的电脑吃鸡游戏叫什么名字 时时彩开奖记录 斯图加特大学建筑学 电脑版王者荣耀进不去怎么办 时时彩提前2分钟开奖器 武里南联昨日赛况