<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
transition-property 對哪個屬性做改變 all（全部）
transition-duration過渡時間端，分為毫秒/秒
transition-delay 延遲
transition-timing-function: 曲線
linear（勻速）
ease(預設值)逐漸慢下來
cubic-bezier(0,1.98,1,-0.17) 網址copy：https://cubic-bezier.com/#0,1.98,1,-0.17
-->
<style type="text/css">
div{
width: 0px;
height: 100px;
border: 1px solid red;
margin-left: 100px;
/* transition-property: all;
transition-duration: 10s;
transition-delay: 0.1s;
transition-timing-function:cubic-bezier(0,1.98,1,-0.17); */
/* 綜合寫法 1：全部屬性 2.過渡 3.延遲 4.速度曲線*/
transition: all 10s 0.1s ease;
}
div:hover{
width: 0;
height: 100px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)