为什么我写的transition-duration，只有在鼠标放上去的时候有用，鼠标移开的时候没有。
来源：2-3 transition-duration属性
sanly123654
2017-05-13 09:14:27
为什么我写的transition-duration，只有在鼠标放上去的时候有用，鼠标移开的时候没有。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transition</title>
<style type="text/css">
div {
margin: auto;
width: 200px;
height: 180px;
line-height: 180px;
text-align: center;
background: #abcdef;
transform: rotate(0deg); /*暂不添加兼容前缀*/
}
div:hover {
cursor: pointer;
transform: rotate(180deg); /*暂不添加兼容前缀*/
transition-property: transform; /*暂不添加兼容前缀*/
transition-duration: 3s; /*暂不添加兼容前缀*/
}
</style>
</head>
<body>
<div>小仓鼠</div>
</body>
</html>
1回答
-
因为离开的时候你没有写transition啊，鼠标经过和离开要分别写的，是两个独立的过程。
/* 鼠标离开 */
div {
margin: auto;
width: 200px;
height: 180px;
line-height: 180px;
text-align: center;
background: #abcdef;
transform: rotate(0deg); /*暂不添加兼容前缀*/
transition-property: transform; /*暂不添加兼容前缀*/
transition-duration: 3s; /*暂不添加兼容前缀*/
}
/* 鼠标经过 */
div:hover {
cursor: pointer;
transform: rotate(180deg); /*暂不添加兼容前缀*/
transition-property: transform; /*暂不添加兼容前缀*/
transition-duration: 3s; /*暂不添加兼容前缀*/
}
0h017-05-14
相似问题