Bagaimana untuk Menghidupkan Paparan CSS dan Perubahan Kelegapan serentak?

Mentransisikan Paparan CSS dan Sifat Kelegapan

Apabila cuba menghidupkan elemen CSS menggunakan kedua-dua sifat paparan dan kelegapan, ia boleh menjadi mencabar. Sifat peralihan CSS standard hanya membenarkan animasi nilai berangka, menjadikannya tidak serasi dengan perubahan paparan.

Walau bagaimanapun, penyelesaian terletak pada memanfaatkan animasi CSS Keyframes. Dengan mencipta animasi bingkai kunci tersuai, kami boleh membuat koreografi peralihan kedua-dua sifat paparan dan kelegapan secara serentak.

Kod CSS yang disediakan memperkenalkan animasi bingkai kunci bernama "fadeInFromNone". Ia bermula dengan menetapkan paparan kepada tiada dan kelegapan kepada 0, menyembunyikan elemen dengan berkesan. Pada 1% daripada animasi, paparan ditetapkan untuk menyekat, menjadikan elemen kelihatan, manakala kelegapan kekal pada 0. Ini mewujudkan penampilan elemen yang pudar daripada ketelusan. Animasi berakhir pada 100%, dengan elemen kelihatan sepenuhnya dan legap.

Untuk menggunakan animasi ini, gunakannya pada keadaan tuding unsur induk. Berikut ialah kod yang dikemas kini:

<code class="css">.parent:hover .child
{
    display: block;

    -webkit-animation: fadeInFromNone 0.5s ease-out;
    -moz-animation: fadeInFromNone 0.5s ease-out;
    -o-animation: fadeInFromNone 0.5s ease-out;
    animation: fadeInFromNone 0.5s ease-out;
}</code>

Penyelesaian ini membolehkan anda mengalihkan kedua-dua sifat paparan dan kelegapan dengan lancar, mencapai kesan animasi yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Menghidupkan Paparan CSS dan Perubahan Kelegapan serentak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!