Fading out a whole page with CSS

Posted: Mon Nov 24, 2014 8:17 am

H3LLO everybody!!

Today I searched for information on internet how to fade in and out the entire website. I did found some good information. I do not want to use jquery or any other javascript.

This is what I did and my result is only nice in the Nav Menu but the blocks are not doing the job. That is why I would like to know if you have any information about it.

style.css

Code:

a{-webkit-transition: all 2s ease-in-out;-moz-transition: all 2s ease-in-out;-ms-transition: all 2s ease-in-out;-o-transition: all 2s ease-in-out;transition: all 2s ease-in-out;}

This one makes it better

Code:

a{animation: fadein 2s;


    -moz-animation: fadein 2s; /* Firefox */


    -webkit-animation: fadein 2s; /* Safari and Chrome */


    -o-animation: fadein 2s; /* Opera */


}


@keyframes fadein {


    from {


        opacity:0;


    }


    to {


        opacity:1;


    }


}


@-moz-keyframes fadein { /* Firefox */


    from {


        opacity:0;


    }


    to {


        opacity:1;


    }


}


@-webkit-keyframes fadein { /* Safari and Chrome */


    from {


        opacity:0;


    }


    to {


        opacity:1;


    }


}


@-o-keyframes fadein { /* Opera */


    from {


        opacity:0;


    }


    to {


        opacity: 1;


    }


}

Posted: Mon Nov 24, 2014 11:05 am

You know what the following means?

Code:

a{....}

Posted: Mon Nov 24, 2014 12:24 pm

yes I know. I managed already to do it but the text from the blocks are not done yet. I wonder if I am missing something. U can take a look now at my website.

Posted: Wed Nov 26, 2014 5:17 am

change a to body

Posted: Wed Nov 26, 2014 4:24 pm

I tried that already but it looks like nothing is happening. Entering homepage text jumps in so I stays with a { .... }