过渡是元素从一种样式逐渐改变为另一种的效果 , 元素从一个属性到另一个属性的过渡

鼠标移动到元素上测试

transition 具体属性值

transition-property 规定元素过渡的名称

.box{
	transition-property : width; /* 设置元素 width 的过渡 */
}

/* 设置元素的过渡属性 */
none : 不过渡任何效果
all  : 默认值 过渡元素的所有属性效果
property : 过渡多个属性以逗号分隔

transition-duration 规定完成一个过渡周期所花费的时间

不能为 0, 当等于 0 时看不到任何过渡效果
.box{
	transition-duration : 1s; /*  0.1s 不足 1 秒时可用写为小数 */
}

transition-timing-function 规定过渡的时间曲线。默认是 “ease”

animation animation-timing-function 相同

.box{
	transition-timing-function : value;
}

value : linear                 动画从头到尾的速度是相同的
        ease                   默认。动画以低速开始,然后加快,在结束前变慢
        ease-in                动画以低速开始
        ease-out               动画以低速结束
        ease-in-out            动画以低速开始和结束
        cubic-bezier(n,n,n,n)  在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

transition-delay 规定过渡何时开始。默认是 0

animation animation-delay 相同

此属性可用用来设置动画延迟执行
.box{
	transition-delay : 1s; /*  0.1s 不足 1 秒时可用写为小数 */
}
	
<style type="text/css">
	
	.box{
		margin: 50px auto;
		width: 100%;
		max-width: 500px;
		min-width:100%; 
		height: 300px;
		border : 1px solid #d1d1d1;
		padding: 20px;
		transition: all 1s;
	}
	#myfirst{
		width: 100%;
		background: red;
		height: 100%;
		transition: inherit;
	}
	.box:hover{
		border-color: #000;
	}
	.box:hover #myfirst{
		background: yellow;
	}
</style>

	
<div class="box">
	<div id="myfirst"></div>
</div>