CODEWITHSUNDEEP
csscss-transitionscss-animations
c0D3l0g1c
c0D3l0g1c

Reputation: 3164

CSS3 IE 10 Page Fade In Transition/Animation

Looking for a cool, smooth lightweight CSS3 page fade in transition effect.

Only need support for IE 10, as I want to use it in a Windows Metro App with the WebView control (which is a lightweight browser control derived from IE 10).

Transition must fire on Page Load.

I want the same effect as this: http://ie.microsoft.com/testdrive/Graphics/FullPageAnimations/1_Introduction.html

Upvotes: 2

Views: 1715

Answers (3)

Константин Ван
Константин Ван

Reputation: 14819

Fade-in when a page is being loaded, fade-out when a page is going to be unloaded!

Put this code in the pages' <head>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>

Upvotes: 0

c0D3l0g1c
c0D3l0g1c

Reputation: 3164

Found a nice clean and easy way of doing this:

HEAD

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

.loaded
{
   opacity:1;
}

BODY

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

Upvotes: 1

jtgaut17
jtgaut17

Reputation: 86

For pure CSS3 you can do the following though you do not necessarily need to have the effect play on both body and div. The div would suffice.

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>

Upvotes: 0

Related Questions