• To take advantage of CSS animation for a fade animation, you can use the transition property in CSS along with an appropriate CSS class.

.anim_fade {
    animation: fadein 8s;
    -moz-animation: fadein 8s;
    -webkit-animation: fadein 8s;
    -o-animation: fadein 8s;
}
@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;
    }
}