17、前端开发：CSS知识总结——过渡（transition）

目录

一、CSS3 过渡

二、它是如何工作？

         三、过渡属性

---

一、CSS3 过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

二、它是如何工作？

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

• 指定要添加效果的CSS属性
• 指定效果的持续时间。

1.实例

应用于宽度属性的过渡效果，时长为 2 秒：

div { transition: width 2s; -webkit-transition: width 2s; /* Safari */ }

注意： 如果未指定的期限，transition将没有任何效果，因为默认值是0。

指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：

<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	transition:width 2s;
	-webkit-transition:width 2s; /* Safari */
}

div:hover
{
	width:300px;
}
</style&g