CSS高级应用

一.过渡

1.transition-property属性

transition-property属性用于指定应用过渡效果的css属性的名称，其过渡效果通常在用户将指针移动到元素上时发生。。基本语法格式如下：

transition-property:none | all | property;

属性值	描述
none	莫有属性会获得过渡效果
all	所有属性会获得过渡效果
property	用户指定应用过渡效果的css属性的名称，多个名称之间用逗号隔开。

<!--more-->

2.transition-duration属性

transition-duration属性用于定义过渡效果花费的时间，默认值为0，常用单位为秒(s)或毫秒(ms)，其基本语法如下：

transition-duration:time;

3.transition-timing-function属性

transition-timing-function属性规定过渡效果的速度曲线，默认为“ease”，其基本语法格式如下：

transition-timing-function:linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);

属性值	描述
linear	指定以相同速度开始至结束的过渡效果，等同于cubic-bezier(0,0,1,1))
ease	指定以慢速开始，然后加快，最后慢慢结束的过渡