過渡動畫： 是從一個狀態(tài) 漸漸的過渡到另外一個狀態(tài)，經(jīng)常和 :hover 一起 搭配使用。
語法格式：
transition： 要過渡的屬性 花費時間 運動曲線 何時開始
transition
簡寫屬性，用于在一個屬性中設(shè)置四個過渡屬性。
transition-property
規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。
transition-duration
定義過渡效果花費的時間。默認是 0。
transition-timing-function
規(guī)定過渡效果的時間曲線。默認是 "ease"。
transition-delay
規(guī)定過渡效果何時開始。默認是 0。
如果想要所有的屬性都變化過渡， 寫一個all 就可以。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 400px;
height: 150px;
background-color: pink;
/*1. transition: 要過渡的屬性 花費時間 運動曲線 何時開始;*/
/*2. 如果有多組屬性，我們用逗號隔開*/
/*transition: width 1s ease 0s, height 1s ease 0s, background-color 1s ease 0s;*/
/*3. all 所有屬性都會變化*/
/*transition: all 1s ease 0s;*/
/*4. 過渡寫到本身上，而不是 hover里面*/
/*transition: all 0.5s;*/
/*5. 擴展，可以設(shè)置不同時進行的動畫*/
transition:width 1s , height 1s linear 1s, background-color 1s;
}
div:hover {/* 鼠標(biāo)經(jīng)過盒子，我們的寬度變寬400，高度變高100 顏色變?yōu)閜urple */
width: 800px;
height: 250px;
background-color: purple;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
