HTML5复习 (15)

CSS3过渡transition

允许CSS的属性值在一定的时间内平滑的过渡。

在鼠标点击，获得焦点，被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

一、transition-property

transition-property:all | none | property

none没有属性改变

all所有属性都改变

property 具体属性名称

二、transition-duration

开始过渡到完成需要花费的时间

transition-duration:time;

time是秒或者毫秒做单位

三、transition-timing-function

动画过渡的方式，只能选用一个

transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end

linear 线性过渡  匀速。

ease 平滑过渡  逐渐变快，到达一定速度，速度增加就慢了

ease-in 由慢到快

ease-out 由快到慢

ease-in-out 又慢到快再到慢

step-start 等同于step(1,start) 先过渡，过渡完的效果等于过渡前的效果

step-end 等同于step(1，end)先过渡，过渡完的效果等于过渡后的效果

step（n,start|end） step这三个不好用

四、transition-delay

设置对象延迟过渡的事件

transition-delay:time;

默认值为0

五、transition

整合上面四个属性

transition:property duration timing-function delay