H5C3移動DIV（transition）
阿新 • • 發佈：2018-12-14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H5C3移動DIV</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
top: 100px;
left: 100px;
/*
過度效果預設會還原
設定移動的方向
transition-property: left;
設定移動的時間
transition-duration: 2s;
控制移動的型別：勻速或者不變速
transition-timing-function: linear;
延時執行
transition-delay: 2s;
簡寫：transition ：屬性名稱 過度時間 時間函式 延遲
為多個樣式新增過度效果
transition: left 2s linear 0s ,background-color 2s linear 0s ;
為所有樣式新增效果 （
缺點：
所有樣式新增過度效果一樣；
效率低，它會去查詢所有新增的樣式
）
tansition:all
瀏覽器支援程度不一樣
*/
transition-property: left;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 2s;
}
div:active {
left: 1000px;
background-color: blue;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>