Fade-In Effect

[Eva Lim]

Hi, I would like some copy on my homepage to fade in automatically by itself upon page load. How can I create this effect?
Thanks for your help in advance!

[Eva Lim]

Think I've solved the issue.

Attach the class ".fade" to the element you want to fade in and add the code below:

.fade {

-webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 5s; /* Firefox < 16 */
-ms-animation: fadein 5s; /* Internet Explorer */
-o-animation: fadein 5s; /* Opera < 12.1 */
animation: fadein 5s;
}

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

/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

[Author]

Posts