寻原因是什么

源自：9-1 CSS3 Keyframes介绍

寻原因是什么

1、鼠标放置某一地方有效，其他地方无效，放置地在那决定

2、当width: 300px;改为width: 100px无放置地

<div>鼠标放到我身上</div>

@Keyframes changecolor{
0%{margin-left: 100px;
    background: green;
}

40%{margin-left:150px;
    background:orange;
}
60%{ margin-left: 75px;
    background:blue;
}

100%{margin-left: 100px;
    background: red;
}
}
div {
width: 300px;
height: 200px;
background: red;
color:#fff;
margin: 20px auto;
}
div:hover {
animation: changecolor 5s ease-out .2s;
}

提问者：慕粉4042427 2016-10-29 15:21

个回答

慕妹7508549

2016-10-29 20:27:43

已采纳

有效的，是不是哪写错了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@Keyframes changecolor{
0%{margin-left: 100px;
background: green;
}

40%{margin-left:150px;
background:orange;
}
60%{ margin-left: 75px;
background:blue;
}

100%{margin-left: 100px;
background: red;
}
}
div {
width: 100px;
height: 200px;
background: red;
color:#fff;
margin: 20px auto;
}
div:hover {
animation: changecolor 5s ease-out .2s;
}
</style>
</head>
<body>
<div>鼠标放到我身上</div>
</body>
</html>

0
慕工程2957023

2016-11-21 13:17:29

你用的什么浏览器？加前缀

0
慕粉4042427

2016-10-29 21:50:16

先给予采纳，复制你的还是无效，但发现1个有趣事，当width: 300px;时鼠标放置在边框至"放"字位置有效，当width:缩小时，有效位置从左边框起右边逐渐缩小，width: 270px时，有效位置就是左边框，低于270无效

0