Bagaimanakah Saya Boleh Memohon Berbilang Peralihan CSS kepada Satu Elemen?

Berbilang Peralihan CSS pada Elemen

Sifat peralihan CSS membolehkan animasi lancar bagi gaya elemen dari semasa ke semasa. Walau bagaimanapun, jika berbilang peralihan digunakan pada elemen yang sama, ia mungkin menimpa satu sama lain, mengakibatkan tingkah laku animasi yang tidak diingini.

Penyelesaian:

Untuk menghidupkan berbilang peralihan CSS elemen, gunakan senarai dipisahkan koma untuk sifat peralihan. Ini memberitahu penyemak imbas bahawa sifat yang ditentukan harus dialihkan secara serentak. Contohnya:

.nav a {
  transition: color .2s, text-shadow .2s;
}

Secara lalai, fungsi pemasaan peralihan ialah "kemudahan", yang menyediakan lengkung pecutan dan nyahpecutan yang lancar. Jika dikehendaki, anda boleh menentukan fungsi pemasaan secara eksplisit menggunakan sifat fungsi pemasaan peralihan. Contohnya, untuk menggunakan peralihan linear:

.nav a {
  transition: color .2s linear, text-shadow .2s linear;
}

Untuk sintaks ringkas, anda juga boleh memisahkan sifat peralihan kepada sifat individu:

.nav a {
  transition-property: color, text-shadow;
  transition-duration: .2s;
  transition-timing-function: linear;
}

Pendekatan ini menggunakan sifat peralihan-sifat untuk menentukan sifat untuk dianimasikan, tempoh peralihan untuk menetapkan tempoh animasi, dan fungsi pemasaan peralihan untuk menentukan animasi lengkung.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memohon Berbilang Peralihan CSS kepada Satu Elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!