transition:动画持续时间,动画属性的作用是赋值给元素,整个元素都在使用这个属性


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡</title>
</head>
<style>
.div1 {
width: 200px;
height: 300px;
background-color: #4cae4c;
transition: 5s;
}

.div1:hover {

width: 500px;
}

.div2 {
width: 100px;
height: 200px;
background-color: #5bc0de;
transition: width 2s, height 2s, transform 2s;
}

.div2:hover {
width: 500px;
height: 600px;
transform: rotate(180deg);
}
</style>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>