CSS Loads Page then does Fade In-CodePudding

my html web page loads in really quickly then does this fade in effect. On the homepage it's fine but every other page loads then fades in again. I just want it to fade in. Any ideas?

#main-wrapper {
    animation: transitionIn 0.75s;
}

#features-wrapper {
    animation: transitionIn 0.75s;
}

@keyframes transitionIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

CodePudding user response：

To avoid this completely, you have to apply opacity: 0; to your elements (#main-wrapperand #features-wrapper) as the regular setting (i.e. in the CSS rules for these elements).

Then the page will load with opacity: 0; on these elements and transition them to opacity: 1;.

Otherwise the page loads with the default opacity (= 1) before the transition starts, which is what you experience now. In an ideal situation the transition would start immediately, but often it can take a few moments.

P.S.: make sure to use animation-fill-mode: forwards; to let it stay at opacity: 1

CodePudding user response：

#main{
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background-color: #333;
    animation-name: transitionIn;
    animation-duration: 3s;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation-iteration-count: infinite;
}
@keyframes transitionIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

<div id="main"><div>