來源：
https://www.bilibili.com/video/BV14J4114768?p=295&spm_id_from=pageDriver
transition:要過渡的屬性 花費(fèi)時(shí)間 運(yùn)動(dòng)曲線 何時(shí)開始
- 屬性：想要變化的css屬性，寬度高度 背景顏色 內(nèi)外編劇都可以。如果想要所有的屬性都變化過渡，寫一個(gè)all就可以。
- 花費(fèi)時(shí)間：?jiǎn)挝皇敲耄ū仨殞憜挝唬?，?.5s
- 運(yùn)動(dòng)曲線：默認(rèn)是ease（可以省略）
- 何時(shí)開始：?jiǎn)挝皇敲耄ū仨殞憜挝唬┛梢栽O(shè)置延遲觸發(fā)的時(shí)間，默認(rèn)是0s（可以省略）
- 一般搭配hover使用，哪個(gè)元素做過渡給誰加上transition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3過度效果</title>
<style>
div {
width: 300px;
height: 200px;
background-color: pink;
/*想要多個(gè)屬性都變化，屬性寫all就可以了*/
transition: all 5s;
/*!*想要寫多個(gè)屬性，利用逗號(hào)進(jìn)行分割*!*/
/*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過度效果--進(jìn)度條</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>
