CSS3过渡

CSS3 中,为了给元素在从一种样式变化到另一种样式时加上某种效果。这里不需要运用Flash动画或JavaScript。

过渡属性

1、 需要过渡属性的名称：transition-property

property  属性名称，多个属性时中间用‘，’隔开 例如：（height ）（height，width）

all 所有属性都会获得过渡属性

none 没有属性获得过渡属性

2、过渡时间：transition-duration

过渡时间 (s 或者 ms), 1s等于1000ms

3、过渡的时间函数：transition-timing-function

是对过渡动画开始结束时的快慢控制

linear ：保持匀速进行过渡

ease ：以慢速开始，然后变快，再以慢速结束进行过渡

ease-in：以慢速开始逐渐变快进行过渡

ease-out：以一定的速度开始，最后以慢速结束进行过渡

ease-in-out：以慢速开始和结束进行过渡

可以通过以下代码进行对比

4、简写

transition-property: width, height;

transition-duration: 1s,2s;

transition-timing-function: ease;

transition-delay: 1s;

就相当于

transition: width 2s  ease-out 1s, height 1s ease-out 1s; 

在CSS中给属性进行过渡常用与 ：hover 伪类 鼠标经过进行过渡

在设置过度时，需要将过渡属性设置给原始状态的 css 中