CSS를 사용하여 페이지 로드시 페이드 인 효과 내기

질문 : 페이지로드시 페이드 인 효과를 위해 CSS 사용

---

페이지로드시 텍스트 단락이 페이드 인되도록 CSS 전환을 사용할 수 있습니까?

나는 그것이 http://dotmailapp.com/ 에서 어떻게 보 였는지 정말 좋아하고 CSS를 사용하여 비슷한 효과를 사용하고 싶습니다. 이후 도메인을 구매했으며 더 이상 언급 된 효과가 없습니다. 보관 된 사본은 Wayback Machine에서 볼 수 있습니다. 

일러스트레이션

이 마크 업 :

<div id="test">
    <p>​This is a test</p>
</div>

다음 CSS 규칙을 사용합니다.

#test p {
    opacity: 0;
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    -webkit-transition: opacity 2s ease-in;
    -moz-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    -ms-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
}​

로드시 전환을 어떻게 트리거 할 수 있습니까?

답변

---

Method 1:

자체 호출 전환을 찾고 있다면 CSS 3 Animations 를 사용해야합니다. 그들은 또한 지원되지 않지만 이것이 정확히 그들이 만들어진 종류입니다.

CSS

#test p {
    margin-top: 25px;
    font-size: 21px;
    text-align: center;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

Demo

• http://jsfiddle.net/SO_AMK/VV2ek/

Browser Support

모든 최신 브라우저 및 Internet Explorer 10 (이상) : http://caniuse.com/#feat=css-animation

 

Method 2:

또는 jQuery (또는 일반 JavaScript, 세 번째 코드 블록 참조)를 사용하여로드시 클래스를 변경할 수 있습니다.

jQuery

$("#test p").addClass("load");​

CSS

#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;

    -webkit-transition: opacity 2s ease-in;
       -moz-transition: opacity 2s ease-in;
        -ms-transition: opacity 2s ease-in;
         -o-transition: opacity 2s ease-in;
            transition: opacity 2s ease-in;
}

#test p.load {
    opacity: 1;
}

Plain JavaScript (not in the demo)

document.getElementById("test").children[0].className += " load";

Demo

• http://jsfiddle.net/SO_AMK/a9dnW/

Browser Support

모든 최신 브라우저 및 Internet Explorer 10 (이상) : http://caniuse.com/#feat=css-transitions

 

Method 3:

또는 .Mail에서 사용하는 방법을 사용할 수 있습니다.

jQuery

$("#test p").delay(1000).animate({ opacity: 1 }, 700);​
                                                                                                                                                                                                

CSS

#test p {
                                                                                                                                                                                                    opacity: 0;
                                                                                                                                                                                                        font-size: 21px;
                                                                                                                                                                                                            margin-top: 25px;
                                                                                                                                                                                                                text-align: center;
                                                                                                                                                                                                                }
                                                                                                                                                                                                                

Demo

• http://jsfiddle.net/SO_AMK/a9dnW/3/

Browser Support

jQuery 1.x : 모든 최신 브라우저 및 Internet Explorer 6 (이상) : http://jquery.com/browser-support/
jQuery 2.x : 모든 최신 브라우저 및 Internet Explorer 9 (이상) : http://jquery.com/browser-support/

이 방법은 대상 브라우저가 CSS 3 전환 또는 애니메이션을 지원할 필요가 없기 때문에 가장 상호 호환됩니다.

출처 : https://stackoverflow.com/questions/11679567/using-css-for-a-fade-in-effect-on-page-load