CSS3動畫IE11問題

我有一個奇怪的問題與IE11。CSS3動畫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標籤：

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

來源

2017-05-29 user3267302

請嘗試將您的關鍵幀定義放在任何其他CSS定義之前。你還可以展示你使用過的meta標籤嗎？ –

我已經把它們放在那裏，它們在除了@ font-face之外的所有東西之前 – user3267302

你的meta標籤看起來也不錯，正在尋找缺少的_IE = Edge_。你可以嘗試用_from_和_to_分別替換關鍵幀中的_0％_和_100％_嗎？ –

我找到了答案。 .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>

來源

2017-05-30 10:44:33 user3267302

CSS3動畫IE11問題

回答

相關問題