Penjelasan terperinci tentang sifat Peralihan dalam CSS3 dan perkongsian contoh_CSS/HTML

1. Sintaks sifat peralihan
[css]
sifat peralihan: semua (semua atribut ditukar) || [attr] (nyatakan gaya yang akan dialihkan) || tiada (Tiada perubahan atribut)

2. Nilai atribut bagi sifat peralihan
(1) tiada: Peralihan akan berhenti melaksanakan serta-merta
(2) semua: Kesan peralihan akan dilaksanakan apabila sebarang nilai atribut elemen berubah
( 3) attr : Tentukan gaya yang hendak dialihkan

1. Harta peralihan——Nyatakan gaya yang hendak dialihkan

　1. Sintaks sifat peralihan
[css]
sifat peralihan: semua (semua atribut diubah) || [attr] (nyatakan gaya yang akan dialihkan) ||.

2. Nilai atribut bagi sifat peralihan
(1) tiada: Peralihan akan berhenti melaksanakan serta-merta
(2) semua: Kesan peralihan akan dilaksanakan apabila sebarang nilai atribut elemen berubah
( 3) attr : Tentukan gaya yang hendak dialihkan

2. Tempoh peralihan
Tempoh peralihan ialah tempoh proses penukaran elemen yang ditentukan, dalam saat (s). tempoh peralihan boleh berfungsi pada semua elemen, termasuk :sebelum dan :selepas

Unsur pseudo. Nilai lalainya ialah 0, yang bermaksud transformasi adalah serta-merta.

3. Transition-delay - masa tunda
Transition-delay digunakan untuk menentukan masa apabila animasi mula dilaksanakan, iaitu, berapa lama masa yang diambil untuk memulakan peralihan selepas menukar nilai atribut elemen Kesan, unit ialah s (kedua)

, penggunaannya sangat serupa dengan tempoh peralihan, dan juga boleh digunakan pada semua elemen, termasuk :sebelum dan :selepas unsur pseudo. Saiz lalai ialah "0", yang bermaksud transformasi dilaksanakan serta-merta,

Tiada kelewatan.

4. Fungsi pemasaan peralihan - Nyatakan bentuk gerakan
Fungsi pemasa peralihan: ease (perlahan perlahan) |. |. ease-out (perlahankan) |

Kelajuan) |. cubic-bezier (Nilai ini membolehkan anda menyesuaikan lengkung masa) (nombor, nombor, nombor, nombor>)

5. Kaedah peralihan penulisan yang komprehensif
[css]Pemilih elemen {peralihan: gaya gerakan, tempoh, bentuk gerakan, masa tunda;}

6. Kaedah peralihan penulisan yang komprehensif dan serasi

　1. Inti Mozilla

[css]
Pemilih elemen {-moz-transition: gaya gerakan, tempoh, bentuk gerakan, masa tunda;}

　2. kernel Webkit

[css]
Pemilih elemen {-webkit-transition: gaya gerakan, tempoh, bentuk gerakan, masa tunda;}

　3. Kernel Opera

[css]
Pemilih elemen {-o-peralihan: gaya gerakan, tempoh, bentuk gerakan, masa tunda;}

　4. Standard W3C

[css]
Pemilih elemen {peralihan: gaya gerakan, tempoh, bentuk gerakan, masa tunda;}

Kesan contoh:

Salin kod Kod adalah seperti berikut:

a{transition:all .6s ease- masuk-keluar ;-webkit-transition:semua .6s kemudahan-keluar;-moz-transition:semua .6s kemudahan-keluar;-o-peralihan:semua .6s kemudahan-keluar;-ms-transition :semua 6s mudah masuk;}