fade out a page not a text or image

I've put this in my css page:

<style>
    body {
        animation: fadeInAnimation ease 3s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }
    @keyframes fadeInAnimation {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
</style>

It works to fade in pages, but the transition from 1 to another is not there.

maybe this will work:

https://www.oodlestechnologies.com/blogs/Set-fade-in-and-fade-out-when-load-the-page-or-refresh-the-page-using-CSS-and-Javascript/

How can I try this code in nicepage?

Hi, João,

Sorry for the delay.

The CSS code can be added in Site Settings ==> CSS. Concerning the JavaScript code, you should first wrap it into the script HTML tag, and add it in Site Settings ==> HTML ==> Additional Head HTML. It is how it should look:

<script>
function setFadeIn(){
    document.body.className = 'body fade-in'
    setTimeout(setFadeOut, 500);
}

function setFadeOut(){
    document.body.className = 'body';
}
</script>

Let us know if you need our further help!
...................................................
Sincerely,
Paul C.
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

How do I do last part?

Call the javaScript function with body tag using onload() event. For example .

Last edited 13 December 2022 by joaopeixoto

Hi, João,

If you mean the JS code, simply wrap it into the script HTML tag and insert it in Site Settings ==> HTML. If you mean something else, let us know about that.
...................................................
Sincerely,
Paul C.
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

What I mean is how do I call the fuctions. body onload="setFadeIn()"

Hi, João,

You can contact the author of the code regarding this as we cannot know how exactly custom codes should work.
...................................................
Sincerely,
Paul C.
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

What I want is to insert that onload="setFadeIn()" in the BODY TAG.
The advice you gave me is only to create the functions. but I need to call them to work.

Hi João,

I assume that you can add some JS code that will insert this attribute into the body tag.
But please note that we do not support custom code modifications, so you can try to find the code that will help you. We also recommend to backup your project before inserting custom code.

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

ok thx.