CSS3 动画 IE11 问题答案

【问题标题】：CSS3 Animation IE11 issueCSS3 动画 IE11 问题
【发布时间】：2017-10-29 17:19:53
【问题描述】：

我在 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 中检查对象并禁用动画时：forwardarrow 0.3s 10s forwards；然后重新启用它..它可以工作，但不能加载... ...这是怎么回事？

这是我的元标记：

<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">

【问题讨论】：

请尝试将您的关键帧定义放在任何其他 CSS 定义之前。您也可以展示您使用的元标记吗？
我已经把它们放在那里了，它们在除@font-face之外的所有东西之前
您的元标记看起来也不错，正在寻找丢失的 IE=Edge。您可以尝试将关键帧中的 0% 和 100% 分别替换为 from 和 to 吗？
是的，我也在尝试。但我找到了答案。我知道在不了解父母的情况下很难回答，但我不知道这会导致问题。

标签： css internet-explorer animation

【解决方案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>

【讨论】：