CSS3 除了 IE (10+)

Question

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

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

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

这是我的.visible class，.invisible 与淡出和 1s 持续时间相同。为了便于阅读，我扩展了这个 class。

.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 为完全不透明度。

CSS3 除了 IE (10+)

CSS3 Animates in all but IE (10+)

html

css

jquery

internet-explorer