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;
}
2016-10-29
有效的，是不是哪写错了
<!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>
举报
