CSS Geçişler, bir metin-fade sayfasını yüklemek için izin vermek için kullanılabilir mi?

Ben ** 16 yaşında görünüyor ve benzer bir etki CSS kullanarak kullanmak isterim.

Not:Etki bu yana satın alındı ve artık etkisi söz etti. Arşivlenmiş bir kopyasını on the Wayback Machine görülebilir.

Resimde

Bu işaretleme:

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

Aşağıdaki CSS kuralı:

#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;
}​

Nasıl geçiş yük tetiklenebilir?

Yöntem 1:

Eğer kendi kendini çağırma geçiş sonra arıyorsanız CSS3 Animations, desteklenen değiller ama bu tam olarak yapılmış bir şey kullanmalısınız.

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/

Tarayıcı Desteği

Tüm modern tarayıcılar, IE 10 : http://caniuse.com/#feat=css-animation

< / ^ br .

Yöntem 2:

Alternatif olarak, DV (veya düz JS, üçüncü kod bloğu) yük sınıfı değiştirmek için kullanabilirsiniz:

bir WordPress kullanmak

$("#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;
}

Düz JS (demo değil)

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

Demo

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

Tarayıcı Desteği

Tüm modern tarayıcılar, IE 10 : http://caniuse.com/#feat=css-transitions

< / ^ br .

Yöntem 3:

Ya da, bu yöntemi kullanabilirsiniz.Postakullanır:

bir WordPress kullanmak

$("#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/

Tarayıcı Desteği

bir WordPress kullanmak 1.xTüm modern tarayıcılar, IE 6 : http://jquery.com/browser-support/ < / ^ br . bir WordPress kullanmak 2.xTüm modern tarayıcılar, 9 IE : http://jquery.com/browser-support/

Bu yöntem en çok hedef tarayıcı CSS3 geçişleri desteklemek zorunda değil, çapraz uyumluduryaanimasyonlar.