transition概述
CSS3的transition功能是使得css样式在发生改变的时候有一个平滑过渡的过程,从效果上看就是一段动画。
transition属性包含4个子属性:
- transition-property:待过渡的属性名称
- transition-duration:过渡的周期时长(单位s/ms)
- transition-timing-function:过渡函数(过程的速度变化)
- transition-delay:过渡开启前的延迟时长(单位s/ms)
1、transition-property
基本上所有涉及颜色、大小(长度、百分比、数字)、位置的CSS属性都支持变换。transition-property的值也可以直接写成“all”,指代上述所有能支持变换的属性。
2、transition-duration
过渡整个过程的执行时间,无需赘述。
3、transition-timing-function
时间函数,即样式变化的动画执行方式,是由令人崩溃的贝塞尔曲线控制的。好在CSS3提供给我们几个可以直接使用并且常用的关键词:
- ease:由快到慢,逐渐减速(默认值)
- linear:始终匀速
- ease-in:始终加速(渐显效果)
- ease-out:始终减速(渐隐效果)
- ease-in-out:先加速后减速(渐显渐隐效果)
4、transition-delay
取值可以是:
- 正整数:经过设定的时间后才启动过渡
- 负整数:立即启动过渡,之前的过渡动作被截断
- 0:不延迟,立即启动过渡(默认值)
CSS3过渡的触发
- 伪类触发::hover :active :focus :checked等
- 媒体查询触发
- JavaScript触发
书写方式
- 在书写transition属性的时候,可以把上述四个子属性写在一起用空格隔开;
- 另外transition本身是复合属性,它可以一次性声明多个待过渡的样式,以逗号分隔,
如:transition: background 1s linear 0s, color 1s ease 1s;兼容性
- IE9及其以下版本的浏览器不支持transition,其他的主流浏览器都能够完美支持。
- transitio属性在实际运用中,需要添加各大主流浏览器的私有前缀:
- -webkit-transition
- -moz-transition
- -o-transition
- -ms-transition
注意事项
针对同一样式的transition属性书写的次数和位置时,有不同的执行方式:
例1:
.box{background: black;transition: background 2s ease 0s;}
.box:active{background: blue;}
- 执行效果:元素在点击激活事件触发后,其背景色从黑到蓝的过渡时间为2s,无延迟。
- 分析:当transition写在触发事件前的原始样式块内,那么定义的过渡方式则是以触发后的样式(上述例子中的:active背景色样式)为过渡终点。
例2:
.box{background: black;transition: background 2s ease 999999s;}
.box:active{background: blue;transition: background 2s ease 0s;}
- 执行效果:元素在点击激活事件触发后,其背景色从黑到蓝的过渡时间为2s,无延迟;鼠标松开后,背景色保持为蓝色,因为其过渡恢复的启动有999999s的延迟,网页的延迟时间没有上限从而相当于12天。因此,从效果上看好像是鼠标点击事件通过JS彻底改变了样式。
- 分析:当transition在触发事件前、后样式块内都书写时,那么各自定义的过渡方式都是以当前所在的样式为过渡终点,和上述例子的顺序相反!