css3新增过渡

过渡的属性是transition,它是指从一种样式转换为另外一种样式

细分属性

transition-property
指定应用过渡效果的 CSS 属性名称，多个属性用逗号分隔。

transition-duration
定义过渡效果持续时间，单位为秒（s）或毫秒(ms)

transition-timing-function
控制过渡的速度曲线，常见值包括：

• ease（默认，先加速后减速）

• linear（匀速）

• ease-in（加速）

• ease-out（减速）

• ease-in-out

transition-delay
设置过渡效果延迟触发的时间

比如设置一个div,宽度为300px，鼠标放上去为600像素

假定要设置过渡效果，过渡时间是3s,速度是由快到慢，延迟2s

css代码如下

transition-property: width;
transition-duration: 3s;
transition-timing-function: ease-in-out;
transition-delay: 2s;

其中transition-property是设置过渡的样式是width

transition-duration是设置过渡时间是3秒

transition-timing-function:设置速度从快到慢

transition-delay:设置延迟2秒

transition可以设置简写

transition:width 5s linear 0s;

这段简写代码表示过渡的样式是width,过渡时间是5秒，速度是匀速运动，延迟0秒