除了 IE 之外的所有 CSS3 动画 (10+)

Question

编辑：通过在 @keyframes 中使用 1 而不是 100 解决了问题。

我正在使用一些基本的 jQuery 将我网站上的所有内容保存为单个 .html 文档。这样做，我有 6 个页面相互重叠，我通过 z-index 调出用户点击的页面。

我正在使用动画来淡出旧页面并淡入单击的页面。

这是我的 .visible 类， .invisible 只是淡出和 1 秒的持续时间。为了便于阅读，我扩展了这个类。

.visible{
    -webkit-animation:fadein;
    -webkit-animation-duration:2s;
    -webkit-animation-timing-function:ease;
    -webkit-animation-delay:0s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-direction:normal;
    -webkit-animation-fill-mode:forwards;

    -moz-animation:fadein;
    -moz-animation-duration:2s;
    -moz-animation-timing-function:ease;
    -moz-animation-delay:0s;
    -moz-animation-iteration-count:1;
    -moz-animation-direction:normal;
    -moz-animation-fill-mode:forwards;

    -o-animation:fadein;
    -o-animation-duration:2s;
    -o-animation-timing-function:ease;
    -o-animation-delay:0s;
    -o-animation-iteration-count:1;
    -o-animation-direction:normal;
    -o-animation-fill-mode:forwards;

    animation:fadein;
    animation-duration:2s;
    animation-timing-function:ease;
    animation-delay:0s;
    animation-iteration-count:1;
    animation-direction:normal;
    animation-fill-mode:forwards;
}

目前，这在最新的 Chrome、Firefox、Safari 和 Opera 中按计划运行。

然而，在 IE11 上，动画不会慢慢改变不透明度。相反，用户点击的页面会立即加载而不淡入淡出（因此旧页面和新页面同时在屏幕上），然后大约一秒钟后旧页面消失（立即，不淡出）。

IE10+ 支持 CSS3，所以我对我做错了什么有点困惑。 Firefox 和 IE 使用相同的代码，Firefox 运行良好。

提前致谢！

编辑：这是我要求的@keyframes 规则：

@-webkit-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:100;
    }
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:100;
    }
}

Answer 1

不透明度应该在 0 和 1 之间，1 表示完全不透明度。