transition 过渡
IE10、Firefox、Chrome、Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
Chrome 25 以及更早版本需要前缀 -webkit-。
IE9 以及更早版本不支持 transition 属性。
过渡属性
【1】transition-property:
规定应用过渡效果的 CSS 属性的名称(当指定的CSS属性改变时,过渡效果开始),其默认值为 all 。
【2】transition-duration:
规定完成过渡效果需要的时间(单位为 s 或 ms),其默认值为 0s ,意味着如果不指定这个属性,将不会呈现过渡效果。
【3】transition-timing-function:
规定过渡效果的时间曲线。
默认 ease :慢速开始,中间变快,慢速结束;相当于 cubic-bezier(0.25, 0.1, 0.25, 1)。
可选 liner:匀速运动;相当于 cubic-bezier(0, 0, 1, 1)。
可选 ease-in:慢速开始;相当于 cubic-bezier(0.42, 0, 1, 1)。
可选 ease-out:慢速结束;相当于 cubic-bezier(0, 0, 0.58, 1)
可选 ease-in-out:慢速开始,慢速结束;相当于 cubic-bezier(0.42, 0, 0.58, 1)
可选 cubic-bezier(n, n, n, n):在 bezier 函数中自定义 0 ~ 1 之间的数值。
贝塞尔时间曲线详解。。。
【4】transition-delay:
规定过渡效果的延迟时间,默认为 0s 。
复合属性
在使用复合属性定义过渡效果时,子属性之间用空格分隔。
transition: width 2s linear;
transition 属性可以指定多个值,当指定多个值时,中间用逗号分隔。
transition: width 2s ease-in-out, height 2s ease-in-out;
过渡阶段
【1】过渡分为两个阶段:前进(forward)和反向(reverse)。
【2】若前进阶段还未完成就进入反向阶段,则反向阶段的初始值为前进阶段结束时的瞬时值。
【3】以 :hover 伪类为例,如果在非 hover 状态下设置了 transition 属性,相当于设置了反向状态,此时前进和反向是一致的。
#test { width: 100px; height: 100px; background-color: cyan; transition: width 2s, height 2s; } #test:hover { width: 300px; height: 300px; }
这段代码意味着,当鼠标悬浮时,将 width 变为 300px,将 height 变为300px,过渡时间为 2s;当鼠标离开时,将 width 变为 100px,将 height 变为 100px,过渡时间为 2s。
但是如果在 hover 状态下也设置了 transition 属性,则 hover 状态下的为前进状态,非 hover 状态下的为反向状态。
#test { width: 100px; height: 100px; background-color: cyan; transition: width 2s, height 2s; } #test:hover { width: 300px; height: 300px; transition: width 5s, height 5s; }
这段代码意味着,当鼠标悬浮时,将 width 变为 300px,将 height 变为300px,过渡时间为 5s;当鼠标离开时,将 width 变为 100px,将 height 变为 100px,过渡时间为 2s。
注意:在 hover 状态下设置 transition 属性时,明确哪些属性需要过渡,而哪些属性不需要过渡。
【4】当子元素和父元素过渡属性一致:若触发子元素过渡时,父元素正在过渡,则将父元素过渡的中间态的值作为子元素过渡的初始值;同理,若子元素过渡并未完成就开始父元素的过渡,则将子元素过渡的中间态的值作为父元素过渡的初始值。
#box:hover { font-size: 48px; transition: font-size 3s; } #test:hover { font-size: 48px; transition: font-size 10s; }
需要注意的是:当子元素与父元素过渡属性一致,但是过渡时间不一致的时候,如上面这段代码,子元素的过渡时间为 10 秒,父元素的过渡时间为 3 秒,当鼠标悬浮在子元素上时,呈现的是子元素的过渡效果,但是父元素的过渡时间也在开始计算;当子元素上过渡进行了 2 秒,此时将鼠标移入父元素,进行父元素的过渡时,这个属性的过渡时间就只有 1 秒。
【5】当需要过渡的属性初始值为 auto 时,不会进行过渡。
#test { width: 100px; height: 100px; margin: 30px auto; background-color: cyan; } #test:hover { transition: margin-left 5s; margin-left: 500px; }
【6】隐式过渡,是指一个属性的改变引起另一个属性的改变。
#box { width: 300px; height: 300px; border: 1em solid black; } #box:hover { font-size: 48px; transition: font-size 3s; }
当 font-size 改变时,border 的宽度也会跟着改变。
Firefox 和 IE 支持隐式过渡。
参考: