个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我试图在悬停时暂停动画(这是一个 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>最佳答案
好吧，事情是这样的，我想不出确切的原因，但这些都是我尝试并失败然后成功的事情(按顺序):
1. 移除-webkit
2. 使用 jquery mouseover 和 mouseout 与 css animationstates“running”和 pause 集成。
3.然后，我观察到如果我在网页上的其他地方多次单击然后悬停一次悬停后，它就起作用了!这给了我引入多个这样的 div 的方向的提示，现在它完全可以正常工作。
关于css - transformX 时未检测到 webkit 动画播放状态悬停，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30613436/
25
4
0
我试图在悬停时暂停动画(这是一个 CSS transformY)状态，但悬停在变换范围内未均匀检测(我观察到它在初始范围内被正确检测到并且转换结束后)这是代码(我将其简化为最小值以便发布):
我有一个带有框的容器，在单击按钮时使用 transformX 在边界内从左向右移动(如缩略图滚动)。容器以 transform: translateX(0px); 开头。我正在为 translateX
IE 中有一个奇怪的错误，如果您使用 margin-left 和 transform:translateX，您会得到一个水平滚动条。 它在 Chrome 和 Firefox 中运行良好。看着它就像 I
我是一名优秀的程序员,十分优秀！