我试图在悬停时暂停动画（这是一个CSS transformY）状态，但悬停在变换范围内未均匀检测到（我观察到它在初始范围内被正确检测到变换结束后） 这是代码（我将其简化为发布的最小值）：
<html>
<head>
<style>
.member{
height:50px;
width:50px;
margin:30px;
border-radius:50%;
border:1px solid #AAAAAA;
background-color:black;
transition:all 0.3s ease;
-moz-animation-name: dropHeader;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 6s;
-webkit-animation-name: dropHeader;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 6s;
animation-name: dropHeader;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 6s;
}
@-moz-keyframes dropHeader {
0% {
-moz-transform: translateX(200px);
}
100% {
-moz-transform: translateY(0);
}
}
@-webkit-keyframes dropHeader {
0% {
-webkit-transform: translateX(200px);
}
100% {
-webkit-transform: translateX(0);
}
}
@keyframes dropHeader {
0% {
transform: translateX(200px);
}
100% {
transform: translateX(0);
}
}
.member:hover{
border:3px solid #ffffff;
box-shadow: 0px 0px 0px 3px #7ec0ee;
-webkit-animation-play-state: paused;
}
</style>
</head>
<body>
<div class="member">
</div>
</body>
</html>
答案 0 :(得分：0)
好的，这就是事情，我无法弄清楚确切的原因，但这些都是我尝试过但失败然后成功的事情（按顺序）：
1.删除-webkit
2.使用jquery mouseover和mouseout集成css animationstates“running”并暂停。
3.然后，我观察到，在一次悬停后如果我在网页空间的其他地方多次点击然后悬停，它就可以了！这给了我一个暗示引入多个这样的div的方向，它现在完全正常。