본문 바로가기

Publishing

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

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

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

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

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
#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;
    }
}
cs


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

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


참고 : 

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

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