語法：transition:[<'transition-property'>||<'transition-duration'>||<'transition-timing-function'>||<'transition-delay'>[,<'transition-property'>||<'transition-duration'>||<'transition-timing-function'>||<'transition-delay'>]]*
用法：transition: <過渡的屬性> <過渡的時間> <過渡的型別(ease ease-in ...)> <延遲時間>,...(如果有更多用逗號隔開)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color:orange;
width:400px;
height:200px;
}
div:hover{
background-color:blue;
/*定義動畫過渡的屬性*/
-webkit-transition-property: background-color;
-moz-transition-property: background-color;
-ms-transition-property: background-color;
-o-transition-property: background-color;
transition-property: background-color;
/*定義動畫過渡的時間*/
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-ms-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
/*定義動畫延遲觸發*/
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-o-transition-delay: 1s;
transition-delay: 1s;
/*定義動畫的過渡效果:
ease:緩解效果，linear：線性效果；
ease-in：漸顯效果；ease-out:漸隱效果;
ease-in-out:漸顯漸隱效果;cubic-bezier:特殊的立方貝塞爾曲線效果*/
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
