<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>過(guò)度動(dòng)畫(huà)</title>
<style>
#box{
width: 100px;
height: 100px;
background-color: pink;
/*transition 過(guò)度動(dòng)畫(huà) 兩個(gè)比寫(xiě)參數(shù) 第一個(gè)為動(dòng)畫(huà)要改變的屬性 第二個(gè)為 動(dòng)畫(huà)執(zhí)行的時(shí)間 */
/*過(guò)度動(dòng)畫(huà)默認(rèn)不會(huì)執(zhí)行 必須動(dòng)畫(huà)的屬性 發(fā)生改變的時(shí)候才會(huì)觸發(fā)動(dòng)畫(huà)執(zhí)行*/
/*all 代表改變所有屬性*/
-webkit-transition: all 3s;
-moz-transition: all 3s;
-ms-transition: all 3s;
-o-transition: all 3s;
transition: all 3s;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
var box = document.querySelector("#box");
box.onclick = function () {
this.style.width = "900px";
this.style.height = "500px";
}
</script>
</body>
</html>
