CSS3 左动画仅在 Chrome 中有效
CSS3 left animation only working in Chrome
我有这个动画(假设我使用了适当的供应商前缀):
@keyframes animIn {
10% {
left: 10%;
opacity: 0;
}
50% { opacity: 1; }
90% {
left: 90%;
opacity: 0;
}
}
在 Chrome 中工作正常,但在 IE 和 Firefox 中,左侧 属性 没有动画。在 IE 中,它们的动画元素保持在左侧(看起来像 left: 0
),而在 Firefox 中,动画元素居中(可能是由于 text-align: center
)。动画元素有 position: absolute
,它会像在所有主流浏览器中一样淡入淡出。
我做错了什么?
使用 margin-left
而不是 left
参见 fiddle http://jsfiddle.net/Lmh3nt6p/4/
@keyframes animIn {
10% {
margin-left: 10%;
opacity: 0;
}
50% { opacity: 1; }
90% {
margin-left: 90%;
opacity: 0;
}
}
我有这个动画(假设我使用了适当的供应商前缀):
@keyframes animIn {
10% {
left: 10%;
opacity: 0;
}
50% { opacity: 1; }
90% {
left: 90%;
opacity: 0;
}
}
在 Chrome 中工作正常,但在 IE 和 Firefox 中,左侧 属性 没有动画。在 IE 中,它们的动画元素保持在左侧(看起来像 left: 0
),而在 Firefox 中,动画元素居中(可能是由于 text-align: center
)。动画元素有 position: absolute
,它会像在所有主流浏览器中一样淡入淡出。
我做错了什么?
使用 margin-left
而不是 left
参见 fiddle http://jsfiddle.net/Lmh3nt6p/4/
@keyframes animIn {
10% {
margin-left: 10%;
opacity: 0;
}
50% { opacity: 1; }
90% {
margin-left: 90%;
opacity: 0;
}
}