[SCSS] 페이지로드시 콘텐츠가 서서히 나타나도록 하기

&__main {
    background: url("/images/bg_main.jpg") no-repeat fixed center center;
    background-size: cover;
    height: 100vh;
    //페이지로드시 Fade In 효과주는 것
    animation: fadein 2s;
    -moz-animation: fadein 2s;
    -webkit-animation: fadein 2s;
    -o-animation: fadein 2s;
}
@keyframes fadein {
    from {
        opacity:0.1;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein {
    from {
        opacity:0.1;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein {
    from {
        opacity:0.1;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein {
    from {
        opacity:0.1;
    }
    to {
        opacity: 1;
    }
}

크롬 & 사파리: -webkit-

파이어폭스: -moz-

오페라: -o-

인터넷 익스플로러: -ms-

페이지를 켰을 시 서서히 나타나는 듯한 효과를 주는 방법.