来源：
https://www.bilibili.com/video/BV14J4114768?p=295&spm_id_from=pageDriver
transition:要过渡的属性 花费时间 运动曲线 何时开始
- 属性：想要变化的css属性，宽度高度 背景颜色 内外编剧都可以。如果想要所有的属性都变化过渡，写一个all就可以。
- 花费时间：单位是秒（必须写单位），如0.5s
- 运动曲线：默认是ease（可以省略）
- 何时开始：单位是秒（必须写单位）可以设置延迟触发的时间，默认是0s（可以省略）
- 一般搭配hover使用，哪个元素做过渡给谁加上transition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3过度效果</title>
<style>
div {
width: 300px;
height: 200px;
background-color: pink;
/*想要多个属性都变化，属性写all就可以了*/
transition: all 5s;
/*!*想要写多个属性，利用逗号进行分割*!*/
/*transition: width 5s, height 1s;*/
}
div:hover {
width: 800px;
height: 500px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3过度效果--进度条</title>
<style>
.fa {
width: 300px;
height: 20px;
border: 1px solid red;
border-radius: 10px;
padding: 1px;
}
.son {
height: 100%;
width:50%;
background-color: red;
border-radius: 10px;
transition: all 1s;
}
.fa:hover .son {
width: 100%;
}
</style>
</head>
<body>
<div class="fa">
<div class="son"></div>
</div>
</body>
</html>
