[CSS] 페이지 혹은 이미지 로드시 서서히 나타나는 페이드 효과

 

요새 흔히 많이 보이는 페이지 혹은 이미지 로드시 서서히 나타나는 페이드 효과 소스입니다.

CSS로만 가능하기 때문에 간편하게 사용이 가능해요. 요새는 트렌드가 기본적인 효과로만 애니메이션을 주는듯 합니다.

---

    #content {
        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;
        }
    }

 

클래스이나 id 값을 적용하고 사용하시면 됩니다.