过渡（CSS3）_transition-duration:定义过渡效果花费的时间,默认是0-CSDN博客

本文链接：https://blog.csdn.net/Liyunhao_haoge/article/details/102643554

过渡（CSS3）
过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaSctript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
transition：要过渡的属性花费时间运动曲线何时开始；
如果有多组属性变化，用逗号隔开；
transition-property:规定应用过渡的CSS属性的名称
transition-duration：定义过渡效果花费的时间，默认为0，要用单位，可以是ms或者s
transition-timing-function:规则过渡效果的时间曲线，默认为"ease"
linear：匀速|ease逐渐慢下来|ease-in加速|ease-out减速|ease-in-out先加速后减速
transition-delay: 规定过渡效果何时开始，默认是0；

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style type="text/css">
	div {
		width: 100px;
		height: 100px;
		background-color: green;
		transition: width 1s ease 0s,height 1s ease-in 1s;
	}
	div:hover {
		width: 300px;
		height: 300px;
	}
	</style>
</head>
<body>
	<div>过渡</div>
</body>
</html>

效果如下：