Bolehkah Peralihan atau Animasi CSS Auto Menyembunyikan Elemen Selepas 5 Saat?

CSS Auto Sembunyikan Elemen Selepas 5 Saat

Persoalannya timbul: adakah boleh menyembunyikan elemen lima saat selepas halaman dimuatkan ? Penyelesaian jQuery diketahui, tetapi tujuannya adalah untuk menirunya menggunakan peralihan CSS. Adakah mungkin, atau di luar keupayaan peralihan/animasi CSS?

Jawapan

Jawapannya ialah ya! Walau bagaimanapun, ia tidak boleh dicapai dalam cara yang dijangkakan kerana menganimasikan atau mengalihkan sifat yang biasanya digunakan untuk menyembunyikan elemen (seperti paparan atau mengubah dimensi dan tetapan kepada limpahan: tersembunyi) tidak boleh dilakukan.

Sebaliknya, animasi dicipta untuk elemen yang berkaitan. Selepas lima saat, keterlihatan: tersembunyi; ditogol, manakala ketinggian dan lebar ditetapkan kepada sifar untuk menghalang elemen daripada menduduki ruang dalam aliran DOM.

Kod Contoh

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}

#hideMe {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}

@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}

HTML

<div></div>

Atas ialah kandungan terperinci Bolehkah Peralihan atau Animasi CSS Auto Menyembunyikan Elemen Selepas 5 Saat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!