Question

我对IE11有疑问。

刚刚用css3动画创建了整个网站，除IE11中的一个元素动画外，一切都很好（其他元素在IE11中工作）。

以下是代码：

.arrow.forward {
        bottom:0px;
        animation:forwardarrow 0.3s 10s forwards;
    }
@keyframes forwardarrow {
    0% {
        bottom:0px;
    }
    100% {
        bottom:-18.5px;
    }
}

我认为一切都很好 - 但这只是在IE11中不起作用的一个元素 - 而且只在IE中。

当我在IE11中检查对象并禁用动画时：向前行驶0.3s 10s前进;然后启用它..它的工作但没有加载...... ......那是怎么回事？

这是我的元标记：

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9;IE=10;IE=Edge,chrome=1"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">

Answer 1

我找到了答案。 .arrow.forward嵌套在包含其他动画的其他html元素中。

不确定原因，但IE 11不想为子元素设置动画。

所以我把它与另一个父母嵌套，一切正常。

<div class="arrow-container">
    <div> <!-- aditional div to prevent parenting issues;) -->
        <div class="svg arrow click back" data-svgIcon="thin-arrow"></div>
        <div class="svg arrow click forward" data-svgIcon="thin-arrow"></div>
    </div>
</div>

CSS3动画IE11问题

1 个答案: