CSS3 新增属性过渡

说明

过渡（transition）是CSS中的重要特性之一。我们可以在不使用flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

transition CSS 属性是 transition-property、transition-duration、transition-timing-function 和 transition-delay 的一个简写属性。

过渡动画：是从一个状态逐渐过渡到另外一个状态。

现在经常和:hover一起搭配使用。

语法：

transition: 属性 花费时间 运动曲线 何时开始;

• 属性：想要变化的css属性，例如margin-right。宽度、高度、背景颜色、内外边距都可以。如果想要所有的属性都过渡，写一个all就可以。
• 花费时间：单位是秒，例如2s，必须写单位。
• 运动曲线：默认是ease，可以省略。例如 ease-in-out。
• 何时开始：单位是秒，必须写单位。可以设置延迟触发的时间，默认是0s（可以省略）。例如1s。

过渡放到哪里呢：谁做过渡给谁加，或者说谁来变化给谁加。例如div变化，那就放到div上。

示例

div的宽度过渡

鼠标放上去停留1秒再做过渡

鼠标放上去宽度和高度做过渡

如果要写多个属性，利用逗号进行分割：

如果想要多个属性都变化，属性写all就可以了