Menggunakan CSS untuk efek fade-in pada pemuatan halaman

442

Dapatkah transisi CSS digunakan untuk memungkinkan paragraf teks memudar saat memuat halaman?

Saya sangat suka tampilannya di http://dotmailapp.com/ dan akan senang menggunakan efek serupa menggunakan CSS. Domain telah dibeli dan tidak lagi memiliki efek yang disebutkan. Salinan yang diarsipkan dapat dilihat di Wayback Machine .

Ilustrasi

Memiliki markup ini:

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

Dengan aturan CSS berikut:

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

Bagaimana transisi dipicu pada beban?

css css-transitions opacity pengguna1556266
sumber
8
Anda mungkin ingin membaca ini: bavotasan.com/2011/a-simple-fade-with-css3
Edwin Bautista
Atau ini: css-tricks.com/snippets/css/…
raksheetbhat

Jawaban:

915

Metode 1:

Jika Anda mencari transisi yang melibatkan diri sendiri maka Anda harus menggunakan Animasi CSS 3 . Mereka juga tidak didukung, tetapi ini adalah jenis tujuan mereka dibuat.

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

Dukungan Browser

Semua browser modern dan Internet Explorer 10 (dan lebih baru): http://caniuse.com/#feat=css-animation


Metode 2:

Atau, Anda dapat menggunakan jQuery (atau JavaScript biasa; lihat blok kode ketiga) untuk mengubah kelas saat memuat:

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

JavaScript Biasa (tidak dalam demo)

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

Demo

Dukungan Browser

Semua browser modern dan Internet Explorer 10 (dan lebih baru): http://caniuse.com/#feat=css-transitions


Metode 3:

Atau, Anda dapat menggunakan metode yang .Mail gunakan:

jQuery

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

CSS

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

Demo

Dukungan Browser

jQuery 1.x : Semua browser modern dan Internet Explorer 6 (dan lebih baru): http://jquery.com/browser-support/
jQuery 2.x : Semua browser modern dan Internet Explorer 9 (dan lebih baru): http: // jquery.com/browser-support/

Metode ini adalah yang paling kompatibel lintas karena browser target tidak perlu mendukung transisi atau animasi CSS 3 .

AMK
sumber
149
Animasi CSS3 didukung dengan baik oleh setiap browser modern yang ada. Tentu saja, IE bukan browser modern.
Rob
6
Ya, tetapi bagaimana jika Anda ingin / perlu kompatibel dengan IE6? Dalam hal ini saya pikir jQuery adalah pilihan terbaik. Tapi, penanya menginginkannya di CSS jadi saya mempostingnya sebagai alternatif.
AMK
4
Bukankah lebih baik untuk mengatur opacity awal ke 0 di javascript? Dengan begitu jika pengguna menonaktifkan javascript, elemennya ada di sana alih-alih tidak pernah muncul.
Jonathan.
3
@ AMK saya mencoba melakukan "memperbaiki" itu hanya di javascript tetapi tidak berhasil, jadi pada akhirnya saya membuat file css terpisah dengan opacity: 1 !important;dan memasukkan <noscript>elemen.
Jonathan.
1
Jawaban yang brilian! Seberapa sulit untuk menerapkan animasi melalui $("#test p").addClass("load");​beberapa kali? Melakukan $("#test p").removeClass('load').addClass("load");​tidak melakukan pekerjaan karena animasi sudah berhenti. Bisakah saya memicu restart dari JavaScript?
Șerban Ghiță
23

Anda dapat menggunakan onload=""atribut HTML dan menggunakan JavaScript untuk menyesuaikan gaya opacity elemen Anda.

Biarkan CSS Anda seperti yang Anda usulkan. Edit kode HTML Anda ke:

<body onload="document.getElementById(test).style.opacity='1'">
    <div id="test">
        <p>​This is a test</p>
    </div>
</body>

Ini juga berfungsi untuk memudar pada halaman lengkap saat selesai memuat:

HTML:

<body onload="document.body.style.opacity='1'">
</body>

CSS:

body{ 
    opacity: 0;
    transition: opacity 2s;
    -webkit-transition: opacity 2s; /* Safari */
}

Periksa situs web W3Schools : transisi dan artikel untuk mengubah gaya dengan JavaScript .

Ned
sumber
Jawaban yang bagus Atau saya kira Anda dapat mengatur onload langsung pada elemen. Suka<div id="test" onload="this.style.opacity='1'"> . Tidak yakin apakah itu berarti acara dipicu sebelum seluruh tubuh dimuat.
Jeppe
5

Menanggapi pertanyaan @ AMK tentang bagaimana melakukan transisi tanpa jQuery. Sebuah contoh yang sangat sederhana yang saya berikan bersama. Jika saya punya waktu untuk memikirkan ini lagi, saya mungkin bisa menghilangkan kode JavaScript sama sekali:

<style>
    body {
        background-color: red;
        transition: background-color 2s ease-in;
    }
</style>

<script>
    window.onload = function() {
        document.body.style.backgroundColor = '#00f';
    }
</script>

<body>
    <p>test</p>
</body>
rampok
sumber