Question

寻找一个很酷，流畅的轻量级CSS3页面，淡化过渡效果。

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

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

我想要与此相同的效果： http://ie.microsoft.com/testdrive/Graphics/FullPageAnimations/1_Introduction.html

Answer 1

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

<强> HEAD

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

.loaded
{
   opacity:1;
}

<强> BODY

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

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

Answer 3

淡入当页面已加载时，淡出当页面已卸载时强>！

将此代码放在'＆lt; head＆gt; s。

页面中

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

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

3 个答案: