tags: [CSS,Transition ]
复制代码

Transition

1. transition是什么?

中文:过渡;转变;变革;变迁

2. transition有什么用?

作用: 实现过渡效果 (元素从属性从一个值的样式变为另一个值的样式)

语法:

transition : [效果表现的属性] [效果持续的时间] ;
/* 实例  */
transition : width 3s ;
复制代码

3s: 表示width属性设置过渡效果，持续时间3s (对于过渡时间：时间值越大，时间过渡时间越长，相比来说，就变化越缓慢)
width: 需要发生过渡变化的属性

⚠️为了支持其他效果，需要添加其他属性支持，以便于兼容性支持

/*完整格式*/

div
{
    /*注：如果不写时间，则默认为0*/
	transition : width 2s; 
		/*增加的携带的属性设置*/
     /*Firefox 4 (兼容火狐4)*/
	-moz-transition : width 2s;
     /*Safari 和 Chrome(兼容Safari和谷歌Chrome)*/
	-webkit-transition: width 2s;
    /*Opera (兼容Opera)*/
	-o-transition: width 2s; 
}
复制代码

3. 效果是怎样生效的呢?

需要有「条件」来触发属性值的改变(一般是 鼠标悬浮)
transition 设置在 原始属性值所在选择器中
改变是指的「相对原始属性值的改变」

▶案例:

当鼠标悬浮至元素<div>上时，启动过渡效果，移开鼠标则效果消失，恢复原状

参考效果

<!--实例代码-可直接运行-->
<!DOCTYPE html>
<html>
	<head>
		 <style>
			 div {
				 width: 100px;
				 height: 100px;
				 background: yellow;
				 transition: width 2s;
				 /*设置transition过渡*/
				 -moz-transition: width 2s;
				 -webkit-transition: width 2s;
				 -o-transition: width 2s;
			 }
			 /*设置div的鼠标悬浮样式*/
			 div:hover {
				 width: 300px;
			 }
			 p b {
				 color: red;
			 }
		 </style>
	</head>
	<body>
		 <div>
		 </div>
		 <p>把鼠标移动到黄色div上，就会显示过渡效果</p>
			 <p><b>注意:本例在 Internet Explorer浏览器无效</b></p>
	</body>
</html>
复制代码