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,

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

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