- transition 属性是一个简写属性,用于设置四个过渡属性:
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
- 注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。
<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>过渡效果</title>
<style type="text/css">
div {margin:100px auto;width:200px;height:100px;background-color:#00F;-webkit-transition:all 1000ms linear 500ms; -moz-transition:all 1000ms linear 500ms; -o-transition:all 1000ms linear 500ms; transition:all 1000ms linear 500ms;
}
div:hover {background-color:#F90;-webkit-transform:rotate(240deg);-moz-transform:rotate(240deg);-o-transform:rotate(240deg);transform:rotate(240deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>