2

CSS3クールで滑らかな軽量のページ フェード イン トランジション効果を探しています。

Windows Metro アプリでWebViewコントロール (IE 10 から派生した軽量のブラウザー コントロール) で使用したいので、IE 10 のサポートのみが必要です。

遷移は、ページの読み込み時に発生する必要があります。

これと同じ効果が欲しい: http://ie.microsoft.com/testdrive/Graphics/FullPageAnimations/1_Introduction.html

4

3 に答える 3

0

ページがロードされているときはフェードイン、ページがアンロードされるときはフェードアウト！

このコードをページの <head> に入れます。

<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>
于 2016-12-01T04:32:57.873 に答える
0

純粋な 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>
于 2013-06-15T17:47:42.907 に答える