[CSS] 페이지로드시 fade in 효과주기

[CSS] 페이지로드시 fade in 효과주기

여러 홈페이지들을 다니다 보면 보이는, 

페이지 로드시 컨텐츠가 fade in 되면서 나타나는 효과를 적용해보자.

CSS

#test {
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}
@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;
    }
}

끝이다. opacity, 즉 불투명도를 애니메이션으로 n초동안 0에서 1까지 주면 된다. 

보통 헤더부분을 제외한 부분에서 많이 쓰이는 것 같다. 

참고 : 

Vendor Prefixes 더하기

작업 초안을 만드는동안, 우리는 브라우저에 맞는 프리픽스를 사용하여 브라우저 지원이 가능한 잘되도록 합니다. 기본 프리픽스들을 달아줍니다:

• 크롬 & 사파리: -webkit-
• 파이어폭스: -moz-
• 오페라: -o-
• 인터넷 익스플로러: -ms-