我制作了一个 CSS3 动画,它在 Firefox 和 Chrome 中运行良好,但在 IE11 和 Edge 中表现不同。
我无法解决此问题,因为很难使用 IE 开发人员工具调试 CSS3 动画。此问题也发生在 Edge 上(但我认为我的 Edge 版本已过时,因此请尝试仅在 IE11 中重现此问题。此修复可能适用于两者)。
这是我想要的动画效果(适用于 Chrome/Firefox):
这是它在 IE11 上的不同动画方式:
代码:
HTML:
<div class="block"></div>
<span>click</span>
CSS:
span {
width: 50px;
height: 50px;
background: red;
font-size: 50px;
}
.block {
position: fixed;
height: 0%;
bottom: 0;
width: 100%;
top: auto;
display: block;
background-color: #0B0B0B;
z-index: 99999;
animation-fill-mode: both;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}
.animate-up {
animation-name: overlayEffectUp;
}
@keyframes overlayEffectUp {
0% {
bottom: 0;
top: auto;
height: 0%;
}
35%,
65% {
height: 100%;
}
100% {
bottom: auto;
top: 0;
height: 0%;
}
}
JavaScript(使用 jQuery):
$('span').on('click', function() {
$('.block').addClass('animate-up')
})
这是演示链接:https://jsfiddle.net/zoq9h7xp/3/
请提供任何帮助,我们将不胜感激!
最佳答案
Edge 似乎有 position: fixed
问题。据说 top: 0
和 top: auto
之间的切换(以及与 bottom
属性相同的故事)会导致此行为。
如果您必须保持固定
位置,您可以尝试使用transform
属性进行动画处理。按如下方式更改您的规则集:
@keyframes overlayEffectUp {
0% {
transform: translateY(100%); // totally offscreen
}
35%,
65% {
transform: translateY(0%); // totally on screen from bottom
}
100% {
transform: translateY(-100%); // totally off screen again to top
}
}
.block {
position: fixed;
top:0;
bottom:0;
transform: translateY(100%);
width: 100%;
background-color: #0B0B0B;
z-index: 99999;
animation-fill-mode: both;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}
希望这对您有所帮助。 干杯,杰伦
关于css - IE11 和 Edge 中奇怪的 CSS3 动画问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58136261/