Question

我目前在IE11中无效的基本动画有问题。它适用于Mozilla x86 / x64，Opera和Chrome。

虽然动画在所有其他浏览器中播放得很好，但IE11在动画时间结束前只显示任何内容，然后显示文本。我创造了一个小提琴来展示这个问题。

＆＃13;

.fade {
  animation: fade 5s;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

＆＃13;

<table>
  <tr class="fade">
    <td>I</td>
    <td>am</td>
    <td>a</td>
    <td>table</td>
    <td>row</td>
  </tr>
</table>

＆＃13;

JSfiddle

Answer 1

您需要添加Microsoft供应商css前缀

.fade {
    -o-animation: fade 5s;
    -moz-animation: fade 5s;
    -webkit-animation: fade 5s;
    animation: fade 5s;
}

@-o-keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@-moz-keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@-webkit-keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

<table>
<tr class="fade">
    <td>I</td>
    <td>am</td>
    <td>a</td>
    <td>table</td>
    <td>row</td>
</tr>

非常基本的CSS动画在IE11中不起作用

1 个答案: