css鼠标划出动画(transition属性详解)

动画描述：鼠标滑入0.2s添加背景颜色，鼠标滑出0.2s变成之前背景颜色

.navigation{
	transition: all 0.2s ease-in 0s;
}
.navigation:hover{
	background: #E3E3E3;
	transition: all 0.2s ease-in;
}

transition

默认值：all 0 ease 0

transition属性其实是以下四个属性的简写：

1. transition-property:需要参与过渡的属性，例如：width、height、background…
2. transition-duration:过渡动画的持续时间，单位秒s或毫秒ms
3. transition-delay：延迟过渡的时间，单位秒s或毫秒ms
4. transition-timing-function：动画过渡的动画类型

示例

//简写前
div{
	width:100px;
	height:100px;
	background:blue;
	transition-property: width;/* 需要参与过渡的属性 */
	transition-duration: 1s;/* 过渡动画的持续时间 */
	transition-delay: 1s;/* 延迟过渡的时间，单位秒s或毫秒ms */
	transition-timing-function: ease-out;/* 动画过渡的动画类型 */
}
div:hover{
	width:300px; 
}
//简写后
div{
	width:100px;
	height:100px;
	background:blue;
	transition:width 1s 1s ease-out ;
}

div:hover{
	width:300px;
}