CSS3之过渡

CSS3之过渡

1、什么是过渡

过渡(transition)：使CSS属性值，在一段时间内平滑过渡，能够观察到变化的过程和最后的结果。

2、过渡要素 & 属性

1、过渡属性

属性：transiton-property
取值：

1. none
2. all
3. property(具体的属性名称)
   ex : transition-property:background;
   transition-property:width;
   可以设置过渡的属性:
   1、颜色属性
   2、取值为数值的属性
   3、转换属性：transform
   4、渐变属性
   5、visibility属性
   6、阴影

2、过渡时长

1. 作用：指定整个过渡所需要的时间
2. 属性：transition-duration
   取值：以 s | ms 作为单位的数值
   1s = 1000ms
   0.3s = 300ms
3. 注意：该属性在过渡中必须设置，否则默认为 0，不会产生过渡效果

3、过渡速度时间曲线函数

属性：transition-timing-function
取值：

1. ease：默认值，慢速开始，快速变快，慢速结束
2. linear：匀速
3. ease-in ：慢速开始，加速效果
4. ease-out: 快速开始，减速效果
5. ease-in-out:慢速开始和结束，先加速再减速

4、过渡延迟

1. 作用：当用户激发过渡效果后，等待多长时间后开始 显示效果
2. 属性：transition-delay
   取值： 以 s | ms 作为单位的数值
   默认值 ：0s

3、触发过渡:用户特殊行为进行触发

如：css伪类(:hover :active :focus :checked …)，媒体查询触发 …
或 JS

4、简写属性

transition:property duration timing-function delay,property duration  ... ...;

参考博客
CSS3过渡属性transition： https://www.cnblogs.com/whs5280/p/9646186.htm
CSS动画transition的用法介绍： http://www.webhek.com/post/css-animation-transition.html