CSS3 IE 10 页面淡入过渡/动画答案

【问题标题】：CSS3 IE 10 Page Fade In Transition/AnimationCSS3 IE 10 页面淡入过渡/动画
【发布时间】：2013-06-15 17:03:54
【问题描述】：

寻找一个酷炫、流畅的轻量级CSS3页面淡入过渡效果。

只需要支持 IE 10，因为我想在带有WebView 控件（这是从 IE 10 派生的轻量级浏览器控件）的 Windows Metro App 中使用它。

转换必须在页面加载时触发。

我想要这样的效果： http://ie.microsoft.com/testdrive/Graphics/FullPageAnimations/1_Introduction.html

【问题讨论】：

标签： css css-transitions css-animations

【解决方案1】：

找到了一种干净且简单的方法：

头部

body
{
   opacity: 0;
   transition: all 1s ease;
}

.loaded
{
   opacity:1;
}

身体

<body onload="document.body.classList.add('loaded');">

【讨论】：

【解决方案2】：

对于纯 CSS3，您可以执行以下操作，尽管您不一定需要在 body 和 div 上都播放效果。 div 就足够了。

CSS

body {
    animation: fadein 2s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#FadeOut {
    width: 100%;
    height: 100%;
    position: absolute;
    animation: fadeout 2s;
}

@keyframes fadeout {
    from {
        opacity:1;
        background-color: blue;
    }
    to {
        opacity:0;
    }
}

HTML

<div id="FadeOut"></div>
<div id="test">This is text in a div underneath the blue div.</div>

【讨论】：

【解决方案3】：

淡入当页面被加载，淡出当页面将被卸载强>！

将此代码放在页面的

中。

<style>
    @keyframes page_transition
    {   
        from {opacity: 0;}
        to {opacity: 1;}
    }
    @-webkit-keyframes page_transition
    {
        from {opacity: 0;}
        to {opacity: 1;}
    }
    html
    {
        animation: page_transition 1s ease-in-out;
        -webkit-animation: page_transition 1s ease-in-out;
    }
    html.unloading
    {
        transition: opacity 500ms linear !important;
        opacity: 0 !important;
    }
</style>
<script>
    window.addEventListener("beforeunload", function() {
            document.documentElement.classList.add("unloading");
        });
</script>

【讨论】：